40条常见的移动端Web页面问题解决方案

àì夳堔傛蜴生んèń 2022-09-21 12:00 120阅读 0赞

倾力总结40条常见的移动端Web页面问题解决方案

2016-05-30 JavaScript

作者：佚名（本文作者可联系我们补上署名）

1、安卓浏览器看背景图片，有些设备会模糊。

用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

代码如下：

background:url(../images/icon/all.png) no-repeat center center;  
\-webkit-background-size:50px 50px;  
background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;都可以，大家试试！

2、图片加载

若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：

具体的canvas API 参见：[http://javascript.ruanyifeng.com/htmlapi/canvas.html][http_javascript.ruanyifeng.com_htmlapi_canvas.html]

下面举例说明一个canvas的例子：

*  
 *  js动态加载图片和li 总共举例17张图片！
    
    var total=17;  
    var zWin=$(window);  
    var render=function()\{  
    var padding=2;  
    var winWidth=zWin.width();  
    var picWidth=Math.floor((winWidth-padding\*3)/4);  
    var tmpl =”;  
    for (var i=1;i<=totla;i++)\{  
    var p=padding;  
    var imgSrc=’img/’+i+’.jpg’;  
    if(i%4==1)\{  
    p=0;  
    \}  
    tmpl +=’
 *  
 *  ‘;  
    var imageObj = new Image();  
    imageObj.index = i;  
    imageObj.onload = function()\{  
    var cvs =$(‘\#cvs\_’+this.index)\[0\].getContext(‘2d’);  
    cvs.width = this.width;  
    cvs.height=this.height;  
    cvs.drawImage(this,0,0);  
    \}  
    imageObj.src=imgSrc;  
    \}
    
    \}  
    render();
    
    3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。
    
    zeptojs内置Touch events方法，具体可以看[http://zeptojs.com/\#Touch][http_zeptojs.com_Touch] events
    
    看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！
    
    4、防止手机中网页放大和缩小。
    
    这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport
    
    还有就是，有些手机网站我们看到如下声明：
    
    设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。
    
    使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为
    
    但是为了更好的兼容，我们会使用完整的viewport设置。
    
    当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。
    
    5、apple-mobile-web-app-capable
    
    apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
    
    语法：
    
    说明：  
    如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
    
    6、format-detection
    
    format-detection 启动或禁用自动识别页面中的电话号码。  
    语法：
    
    说明：  
    默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
    
    7、html5调用安卓或者ios的拨号功能
    
    html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。  
    如下：
    
    10010
    
    8、html5GPS定位功能
    
    具体请看：[http://www.w3school.com.cn/html5/html\_5\_geolocation.asp][http_www.w3school.com.cn_html5_html_5_geolocation.asp]
    
    9、上下拉动滚动条时卡顿、慢
    
    body \{  
    \-webkit-overflow-scrolling: touch;  
    overflow-scrolling: touch;  
    \}
    
    10、禁止复制、选中文本
    
    Element \{  
    \-webkit-user-select: none;  
    \-moz-user-select: none;  
    \-khtml-user-select: none;  
    user-select: none;  
    \}
    
    解决移动设备可选中页面文本(视产品需要而定)
    
    11、长时间按住页面出现闪退
    
    element \{  
    \-webkit-touch-callout: none;  
    \}
    
    12、iphone及ipad下输入框默认内阴影
    
    Element\{  
    \-webkit-appearance: none;  
    \}
    
    13、ios和android下触摸元素时出现半透明灰色遮罩
    
    Element \{  
    \-webkit-tap-highlight-color:rgba(255,255,255,0)  
    \}
    
    14、active兼容处理 即 伪类 :active 失效
    
    方法一：body添加ontouchstart
    
    方法二：js给 document 绑定 touchstart 或 touchend 事件
    
      
    a \{  
    color: \#000;  
    \}  
    a:active \{  
    color: \#fff;  
    \}  
      
    bar
    
    document.addEventListener('touchstart',function()\{\},false);
    
    15、动画定义3D启用硬件加速
    
    Element \{  
    \-webkit-transform:translate3d(0, 0, 0)  
    transform: translate3d(0, 0, 0);  
    \}
    
    16、Retina屏的1px边框
    
    具体请百度谷歌关键字，解决方案有很多
    
    17、webkit mask 兼容处理
    
    某些低端手机不支持css3 mask，可以选择性的降级处理。  
    比如可以使用js判断来引用不同class：
    
    if( ‘WebkitMask’ in document.documentElement.style)\{  
    alert(‘支持mask’);  
    \} else \{  
    alert(‘不支持mask’);  
    \}
    
    18、旋转屏幕时，字体大小调整的问题
    
    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 \{  
    \-webkit-text-size-adjust:100%;  
    \}
    
    19、transition闪屏
    
    /设置内嵌的元素在 3D 空间如何呈现：保留3D /  
    \-webkit-transform-style: preserve-3d;  
    / 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /  
    \-webkit-backface-visibility:hidden;
    
    20、圆角bug
    
    某些Android手机圆角失效
    
    background-clip: padding-box;
    
    21、顶部状态栏背景色
    
    说明：  
    除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
    
    如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。
    
    如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
    
    如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
    
    默认值是default。
    
    22、设置缓存
    
    手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
    
    23、桌面图标
    
      
      
      
    
    
    iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
    
    上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！
    
    图片尺寸可以设定为57\*57（px）或者Retina可以定为114\*114（px），ipad尺寸为72\*72（px)
    
    24、启动画面
    
    iOS下页面启动加载时显示的画面图片，避免加载时的白屏。  
    可以通过madia来指定不同的大小：
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
    # Search::-webkit-search-cancel-button\{ #
    
    display: none;  
    \}
    
    如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。
    
    40、唤起select的option展开  
    zepto方式:
    
    $(sltElement).trrgger(“mousedown”);
    
    原生js方式:
    
    function showDropdown(sltElement) \{  
    var event;  
    event = document.createEvent(‘MouseEvents’);  
    event.initMouseEvent(‘mousedown’, true, true, window);  
    sltElement.dispatchEvent(event);  
    \};
    
    原文地址：[http://mp.weixin.qq.com/s?\_\_biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=23&srcid=0619deajtWecx8GEb1WKwIag\#rd][http_mp.weixin.qq.com_s_biz_MzAwNjI5MTYyMw_mid_2651493053_idx_1_sn_8409bc267cd73229425a915f27f6a27f_scene_23_srcid_0619deajtWecx8GEb1WKwIag_rd]

[http_javascript.ruanyifeng.com_htmlapi_canvas.html]: http://javascript.ruanyifeng.com/htmlapi/canvas.html
[http_zeptojs.com_Touch]: http://zeptojs.com/#Touch
[http_www.w3school.com.cn_html5_html_5_geolocation.asp]: http://www.w3school.com.cn/html5/html_5_geolocation.asp
[http_mp.weixin.qq.com_s_biz_MzAwNjI5MTYyMw_mid_2651493053_idx_1_sn_8409bc267cd73229425a915f27f6a27f_scene_23_srcid_0619deajtWecx8GEb1WKwIag_rd]: http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=23&srcid=0619deajtWecx8GEb1WKwIag#rd