关于移动端页面的日常总结

1.移动端个别css样式

a：去掉触屏端点击阴影

a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}

b：文字渲染-强制抗锯齿
-webkit-font-smoothing: antialiased;
-webkit-text-stroke: 1px transparent;
text-shadow: rgba(0,0,0,.01) 0 0 1px;

c：关于文字强行换行（pc适用）

word-break:break-all;只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据，

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap; 强制不换行，都起作用

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

2.移动端字体

我使用的是
font-family: "微软雅黑", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
微软雅黑不是必须的，移动端没有微软雅黑字体（只为个别在pc端观看体验好点）

安卓跟ios的系统默认字体基本上都是无衬线字体，区别不大。

3.移动端rem布局的文字居中问题

主要出现：rem布局中会出现同样的行高或者padding值在--安卓跟ios不同系统--下表现不一样。

具体表现：例如，这种小标签（大标签也是有的，但是一般看不出来，小的比较明显），会出现在ios偏下，安卓偏上的情况

出现原因：rem布局中，浏览器在渲染的时候相对值转换成绝对值的时候会四舍五入的省略小数，（jq或者js获取页面元素宽高的时候，取的值是4舍5入的整数）

解决办法：我的解决办法是在页面刚开始判断手机系统，然后给html标签添加对应的class名，然后有针对性的定义样式。

4.页面中全屏引导图设置隐藏，但是会闪一下

主要表现：页面中如果有全屏引导图设置了隐藏，但是刚打开页面还是会闪出来一下。

出现原因：可能是外链的css类，加载渲染速度不够快。

解决办法：直接在html中添加行间样式。style="display:none;"。提高css样式层级速度。

5.移动端中的运动

a：能用css不用js，js的话运动会有卡顿，用户体验么有css3的好。

b：关于位移，尽量用transform，少用margin-top，top之类。

c：页面中的滚动有时候会出现重影，多半父级的定位引起，去掉就好。

6.移动端click延迟问题

ckick事件在移动端会有300ms的延迟，而且是能明显感觉到的

我一般都是用touch事件模拟点击下边是js原生的写法

    <body>
        <div id="div"></div>
    </body>
    <script type="text/javascript">
        var odiv = document.getElementById('div');
        var onOff=true;//用来判断是否是点击的开关
        /*touchstart事件只要按下就会触发但是会有滑动页面的情况，
         * 所以这里只是更改判断条件，触发的话开关开启。
         * */
        odiv.addEventListener('touchstart',function(){
            onOff=true;
        })
        /*如果有滑动页面的情况才会触发touchmove事件，
         * 单纯按下抬起的话不会触发，触发的话开关关闭
         * */
        odiv.addEventListener('touchmove',function(){
            onOff=false;
        })
        /*根据开关情况判断是单纯点击还是滑动页面，滑动的话直接return*/
        odiv.addEventListener('touchend',function(){
            if(!onOff) return;
            alert('模拟点击事件');
        })    
    </script>

下边是jq的写法

var onOff=true;
var odiv=$('#div')
odiv.on('touchstart',function(){
    onOff=true;
})
odiv.on('touchmove',function(){
    onOff=false;
})
odiv.on('touchend',function(){
    if(!onOff) return;
        alert('模拟点击事件');
})

7.判断手机系统

window.onload = function () {
     var u = navigator.userAgent;//返回用户代理头的字符串(包括浏览器版本信息等)
     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
             alert("安卓手机");
             // window.location.href = "mobile/index.html";
         } else if (u.indexOf('iPhone') > -1) {//苹果手机
             // window.location.href = "mobile/index.html";
             alert("苹果手机");
         } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
            alert("winphone手机");
             // window.location.href = "mobile/index.html";
      }
 }

8.表单弹出键盘，页面中的定位会出现bug

主要出现在ios下的uc浏览器。

具体表现：当点击表单弹出键盘的时候，页面中如果有顶部或底部的固定定位，定位会失效。

出现原因：滚动溢出。

解决方法：弹出的固定层，阻止touchmove的默认事件，即e.preventDefault()。不过并不能完全解决，还是会出现小的位置错误。

9.ios下click事件不冒泡，事件委托附不上去

a.如果是定位类，受元素位置影响。可以把元素放到页面html结构中较上的位置。

b.对目标元素使用CSS cursor:pointer。

c.使用原生的支持click冒泡到document的元素，例如a和button。

10.h5 video标签的具体兼容表现

下面是video视频在播放的时候各个浏览器的不同表现：

安卓系统下播放中

浏览器名称	浏览器版本	正常位置无定位	fixed固定定位	播放时层级
uc	11.4.2.936	默认自动固定到顶部	正常	无限高
qq	6.6.0.2300	滑动到顶部以后，会固定在顶部	正常	无限高
百度	V7.0	自然位置	定位有效，上下滑动页面，视频抖动严重	无限高
搜狗	5.5.1.23552	自然位置	定位有效，向上滑动页面，视频抖动	正常
google	49.0.2623.105	自然位置	正常	正常
猎豹	4.36.4	自然位置	全屏播放	全屏播放
欧朋	12.5.0.9	自然位置	正常	正常
火狐	45.0.2	自然位置	正常	正常

ios系统下播放中

浏览器名称	浏览器版本	正常位置无定位	fixed固定定位	播放时层级
uc	11.4.9.940	全屏，只能关闭播放或小窗播放	全屏，只能关闭播放或小窗播放	全屏，只能关闭播放或小窗播放
qq	7.3.0.2956	滑动到顶部以后，会固定在顶部，视频窗口可拖动	不生效滑动到顶部以后，会固定在顶部，视频窗口可拖动	无限高，视频窗口可拖动
自带safari	ios10.2.1系统	全屏，退出后正常	全屏，退出后正常	全屏，退出后正常

posted @ 2017-03-16 12:56 异能嗜界阅读(350) 评论(0) 收藏举报

刷新页面返回顶部

关于移动端页面的日常总结

公告