移动端的一些坑，不断完善中...（含iframe）

Posted 2023-03-26

参考技术A

症状：软键盘弹出或者收起，弹窗自动调整定位不准的问题
原因：第一次键盘唤起慢或其它

症状：safari浏览器会将一些后渲染dom的字体变大
原因：Mobile Safari automatically scales text if it thinks the text will render too small

ios iframe 相关问题1：
症状：iframe宽度被内嵌页面宽度撑大
解决办法：

说明:
解决 ios+iframe宽度被内嵌页面宽度撑大 这一问题的核心是添加这两个属性：

但是可能嵌入其它 url 时会产生 iframe 白屏 的问题，所以必要时，要去掉 display: \'block\' 以及针对 width: condition ? \'0\' : \'100%\' 这一属性添加条件判断；高度相关问题同理，必要时也需要使用条件判断

ios iframe 相关问题2：
症状：iframe内嵌页面不能滚动
解决办法：给 iframe 添加父级，然后给父级增加样式：

注意：
谨慎使用 scrolling=\'no\' ，除非已经确认内嵌页面是不完全需要滚动的

ios iframe 相关问题3：
症状：子页已滚到页面顶端，但是iframe未回到顶部，导致页面展现不能达到预期效果
解决办法：

附上父页面dom结构以及样式：

ios iframe 相关问题4：
症状：子页加载并滑动页面若干次后父级页面卡死
解决办法：
在父级页面增加事件监听

症状：渲染出一些可搜索词，点击会新开页
原因：有些词被自动渲染成了这副鬼--> <a keyword-hyperlink href="#">XXX</a>
立即干掉它：

症状：后退没有刷新页面
解决办法：

针对单个模块

移动端的坑~~~~~~~

随着前端的热度不断升温，行业对前端的要求越来越高；精准无误的实现UI设计，已成为前端职业更加精细化的一种表现；
随着移动互联网的发展、WebApp似乎一种不可逾越的鸿沟；越来越多的企业开始趋势于轻量级的设计，H5正在慢慢的发酵可以完成更多的原生体验；
交互质量的提升，对前端更是一种质的飞越；前端作为门槛低，精深难的事实一直被论证，想成为真正大神，要经历痛苦的月球表面-满满的都是坑；
只有爬过来的人，才有资格说：要改变、要革新、做架构~

说了那么多，就是为了小伙伴们在前端的路上更加精细的学习；本文持续更新移动Web的各种大小泥坑~

目录（更新20170216）

1.meta基础知识

<!-- 声明文档使用的字符编码 -->

    <meta charset=‘utf-8‘>

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta name="flexible" content="initial-dpr=1"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 页面描述 -->

    <meta name="description" content="不超过150个字符"/>

    <!-- 页面关键词 -->

    <meta name="keywords" content=""/>

    <!-- 网页作者 -->

    <meta name="author" content="male"/>

    <!-- 搜索引擎抓取 -->

    <meta name="robots" content="index,follow"/>

    <!-- iOS 设备 begin -->

    <meta name="apple-mobile-web-app-title" content="标题">

    <!-- 添加到主屏后的标题（iOS 6 新增） -->

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <!-- 设置苹果工具栏颜色 -->

    <meta name="format-detection" content="telphone=no, email=no"/>

    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->

    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <!-- 不让百度转码 -->

    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- windows phone 点击无高光 -->

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="msapplication-TileColor" content="#000"/>

2.移动端字体解决方案

 

 

 

body {

 

    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}

 

iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。
iOS 9+ Safari开始支持 -apple-system 参数， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS
微软雅黑是为了兼容Win系统，毕竟视网膜分辨率的win系统用Simsun是非常丑陋的，可以用4K屏@windowns 去看 JD 淘宝，你能忍的话我就没话说
PingFang SC 是简体苹方，看需要 如果要命中对应 苹方字体的话 直接写 PingFang 不带引号。
4.0之前版本英文字体原生Android使用的是Droid Sans，中文字体原生Android会命中Droid Sans Fallback。
4.0+ 中英文字体都会使用原生Android新的Roboto字体。
其他第三方Android系统也一致选择默认的无衬线字体。
Android 就直接让它命中系统字体吧，因为你无法预知发行厂商会去内置什么字体，或者人家root去修改什么字体。
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考，适合视觉稿宽度为750px的:

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

 

3.Touch事件的详细解析
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
TouchEvent
touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target：当前元素
参考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
4.Click事件的延时问题
移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。

 

5.webkit表单输入框placeholder的颜色值能改变么

 

 

 

input::-webkit-input-placeholder{color:#AAAAAA;}

 

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

 其他：

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片:.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字:.css{-webkit-user-select:none}

5.常用的移动端框架
zepto.js
语法与jquery几乎一样，会jquery基本会zepto~
最新版本已经更新到1.16
官网：http://zeptojs.com/
中文(非官网)：http://www.css88.com/doc/zeptojs_api/
常使用的扩展模块：
浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js
tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js
iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~
实现下拉刷新，滑屏，缩放等功能~
最新版本已经更新到5.0
官网：http://cubiq.org/iscroll-5
underscore.js
笔者没用过，不过听说好用，推荐给大家~
该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
官网：http://underscorejs.org/
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js

swiper.js

 

6.Flex布局
flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~

 

 

 

/* ============================================================

 

   flex：定义布局为盒模型

   flex-v：盒模型垂直布局

   flex-1：子元素占据剩余的空间

   flex-align-center：子元素垂直居中

   flex-pack-center：子元素水平居中

   flex-pack-justify：子元素两端对齐

   兼容性：ios 4+、android 2.3+、winphone8+

   ============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

 

7.0.5像素边框的实现
大家都知道，设计稿中的1像素，在页面上其实就是2像素；这时他们就会说，我们的1px太粗；
其实，我们应该用理解的态度对待这件事，因为0.5像素的线确实好看，因为原生的线也是0.5像素；如果你学习了这个方法，其实也不会再介意1px和0.5px了；
下面是一个demo 纯css利用伪类实现，总体来讲还是比较稳定的，要求同级必须是相对定位；

 

 

 

<div class="box">

 

    <div class="btn">

        0.5像素↓

    </div>

</div>

<style type="text/css" media="all">

    .box{

        width:300px;

        height:300px;

       

    }

    .btn{

        width:300px;

        line-height:150px;

        position:relative;

       

        text-align:center;

    }

    .btn:after {

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid #fff;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(.5);

    transform: scaleY(.5)

}

/**less写法**/

.bor-b(@col:#eee) {

  position: relative;

  &:after{

    content: " ";

    position: absolute;

    left: 0;

    width: 100%;

    height: 1px;

    color: #d9d9d9;

    bottom: 0;

    border-bottom: 1px solid @col;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);}

}

</style>

 

8.解决移动端双击页面上滑问题

 

 

 

function proMove() {

 

var agent = navigator.userAgent.toLowerCase(); //检测是否是ios

var iLastTouch = null; //缓存上一次tap的时间

if(agent.indexOf(‘iphone‘) >= 0 || agent.indexOf(‘ipad‘) >= 0) {

document.body.addEventListener(‘touchend‘, function(event) {

var iNow = new Date().getTime();

 

iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;

var delta = iNow - iLastTouch;

if(delta < 500 && delta > 0) {

event.preventDefault();

return false;

}

iLastTouch = iNow;

}, false);

}

}