移动端 - 常见问题及解决方案

女爷i 2022-05-26 10:05 418阅读 0赞

*  1. 视口（viewport）
 *  2. 屏幕旋转（orientation）
 *  3. 全屏显示（full）
 *  4. 识别电话号码和邮箱
 *  5. 默认样式
 *  6. 安卓端背景图片模糊问题
 *  7. 图片加载

# 1. 视口（viewport） #

*  `<meta name="viewport" content="...">`，参数之间 `,` 分隔

*  `layout viewport` 是网页的所有内容，他可以全部或者部分展示给用户
 *  `visual viewport` 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">设置layout viewport 的宽度，为一个正整数，<code>width-device</code> 表示设备宽度</td> 
  </tr> 
  <tr> 
   <td align="left">user-scalable</td> 
   <td align="left">是否允许用户进行缩放，不允许为 <code>no</code> / <code>0</code> ，允许为 <code>yes</code> / <code>1</code></td> 
  </tr> 
  <tr> 
   <td align="left">initial-scale</td> 
   <td align="left">设置页面的初始缩放倍数，<code>1.0</code> 表示不缩放</td> 
  </tr> 
  <tr> 
   <td align="left">minimum-scale</td> 
   <td align="left">允许用户的最小缩放倍数，<code>0.8</code> 表示最小缩放0.8倍</td> 
  </tr> 
  <tr> 
   <td align="left">maximum-scale</td> 
   <td align="left">允许用户的最大缩放倍数，<code>2.0</code> 表示最大缩放2倍</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">设置layout viewport 的高度，这个属性对我们并不重要，很少使用</td> 
  </tr> 
 </tbody> 
</table>

# 2. 屏幕旋转（orientation） #

仅 `QQ` 和 `UC` 支持直接设置

*  QQ 浏览器

*  UC 浏览器

*  判断状态（竖屏 or 横屏）

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
    
    function hengshuping() { 
        if (window.orientation == 90 || window.orientation == -90) {
            // 横屏
        } else {
            // 竖屏
        }
    }

# 3. 全屏显示（full） #

即遮盖浏览器头部信息栏和底部菜单栏

*  QQ

*  UC

# 4. 识别电话号码和邮箱 #

*  禁止识别电话号码和邮箱

*  拨打电话和发邮件

href="tel:"
    href="mailto:"

# 5. 默认样式 #

*  默认字体设置 `Helvetica`  
    移动端一般没有宋体和微软雅黑，中文字体无需设置

body { font-family: Helvetica; }

*  清除点击阴影 `-webkit-tap-highlight-color`

a, input, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }

*  清除按钮圆角 `-webkit-appearance`

input, button { -webkit-appearance: none; border-radius: 0 }

*  禁止文字缩放 `-webkit-text-size-adjust`

body *{ -webkit-text-size-adjust: 100%; }

*  选中文字设置 `-webkit-user-select`  
    不兼容安卓

p { -webkit-user-select: none; }

*  Font Boosting  
    在一段文字我们没有设置高度时，在webkit内核下，文字的大小被浏览器放大了

/* 给文字设置最大高度 */
    p { max-height: 36px; }

*  IOS 下 body的overflow问题  
    横向拖动

html { height: 100%; overflow: hidden; }
    body { position: relative; margin: 0; height: 100%; overflow: auto; }
    #wrap { height: 100%; overflow: auto; }
    header { position: absolute; width: 200%; height: 40px; color: #FFF; background: rgba(0, 0, 0, .5); }
    section { padding-top: 40px; }

# 6. 安卓端背景图片模糊问题 #

*  用同等比例的图片在PC端很清晰，手机端由于devicePixelRatio的原因，图片显示模糊
 *  使用 2 倍的背景图来代替 img 标签

.logo { display:inline-block; width:100%; height:50px; background: url('../images/logo.png') no-repeat center center; -webkit-background-size: 50px 50px; background-size: 50px 50px; }

# 7. 图片加载 #

*  图片加载慢，一般用canvas方法加载
 *  JS 动态加载