H5 移动端开发知识及解决方案

迈不过友情╰ 2022-12-23 09:58 312阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

## 1. 基础 Meta 基础知识： ##

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）

仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）

IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别

#### 其他meta知识 ####

<meta name="renderer" content="webkit">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="HandheldFriendly" content="true">
    
    <meta name="MobileOptimized" content="320">
    
    <meta name="screen-orientation" content="portrait">
    
    <meta name="x5-orientation" content="portrait">
    
    <meta name="full-screen" content="yes">
    
    <meta name="x5-fullscreen" content="true">
    
    <meta name="browsermode" content="application">
    
    <meta name="x5-page-mode" content="app">
    
    <meta name="msapplication-tap-highlight" content="no">

#### a 标签的 href 属性的妙用 ==》打电话、发短信、写邮件： ####

1.  打电话

1.  发短信，winphone系统无效

1.  写邮件（注：在添加这些功能时，第一个功能以"?“开头，后面的以”&"开头 ）

<a href="mailto:863139978@qq.com">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
    
    <a href="mailto:863139978@qq.com?body=http:
    <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>

#### 页面通用模板如下： ####

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
      <meta content="yes" name="apple-mobile-web-app-capable">
      <meta content="black" name="apple-mobile-web-app-status-bar-style">
      <meta content="telephone=no" name="format-detection">
      <meta content="email=no" name="format-detection">
      <title>标题</title>
      <link rel="shortcut icon" href="/favicon.ico">
    </head>
    
    <body>
      这里开始内容
    </body>
    
    </html>

## 2. 使用 rem 作为单位： ##

了解 CSS 的各种单位

*  `em`：em是一个相对的度量单位，对于浏览器来说，1em=16px，16px为浏览器的默认字体大小。父级的字体大小为 `font-size: 2em`，即：32px。若此时，子元素的 `font-size: 2em`，即：64px。em单位为一个相对的度量单位，它通过寻找父标签的 `font-size`，然后通过计算得出自身的 `font-size`。
 *  `rem`：根节点`html`的`font-size`决定了`rem`的尺寸，也就是说它是一个相对单位，相对于`html`。浏览器的默认的 `font-size` 是16px，1rem默认就等于16px。
 *  `%`：以父级的宽度为基准。如父级`width: 200px`，则子级`width:50%`为`width:100px`
 *  `vw和vh`：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。
 *  `vmin和vmax`：`vmin`为当前`vw` 和`vh`中较小的一个值；`vmax`为较大的一个值。例如视口宽度`375px`，视口高度`812px`，则`100vmin = 375px`，`100vmax = 812px`

#### 1. 人工适配 ####

html {  font-size: 100px; }
    @media(min-width: 320px) {  html {  font-size: 100px; } }
    @media(min-width: 360px) {  html {  font-size: 112.5px; } }
    @media(min-width: 400px) {  html {  font-size: 125px; } }
    @media(min-width: 640px) {  html {  font-size: 200px; } }

给手机设置100px的字体大小; 对于320px的手机匹配是100px，其他手机都是等比例匹配;  
因此设计稿上是多少像素的话，那么转换为rem的时候，rem = 设计稿的像素/100 即可。

#### 2. fontSize.js ####

页面开头动态计算 `font-size`（1rem = 16px）

(function() { 
      // document.documentElement：获取document的根元素
      var html = document.documentElement
      function onWindowResize() { 
        // html.getBoundingClientRect().width：获取html的宽度(窗口的宽度)
        html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px'
      }
      // 监听window的resize事件
      window.addEventListener('resize', onWindowResize)
      onWindowResize()
    })()

## 3. 禁用a，button，input，select，textarea等标签背景变暗 ##

移动端使用a标签做按钮的时候或者文字连接的时候，点击按钮会出现一个 "暗色的"背景，比如如下代码：

<a href="">button1</a>
     <input type="button" value="提交"/>

在移动端点击后 会出现"暗色"的背景，这时候我们需要在css加入如下代码即可：

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

## 4. 移动端IOS手机下清除输入框内阴影 ##

input,textarea { 
       -webkit-appearance: none;
    }

## 5. 在IOS中 禁止长按链接与图片弹出菜单 ##

a, img { 
       -webkit-touch-callout: none; 
    }

## 6. calc基本语法 ##

.class { 
      width: calc(expression);
    }

1.  支持使用 “+”,”-“,”\*” 和 “/” 四则运算。
2.  可以混合使用百分比(%), px, em, rem等作为单位可进行计算。

.calc{ 
        margin-left:50px;
        padding-left:2rem;
        width:calc(100%-50px-2rem);
        height:10rem;
    }

## 7. 移动端 Click 事件产生 200-300ms 延迟 ##

移动设备上的web网页是有300ms延迟的，可能会造成按钮点击延迟甚至是点击失效。

事件响应顺序

> ontouchstart > ontouchmove > ontouchend > onclick

解决方案：

1.  `fastclick` 可以解决在手机上点击事件的 300ms 延迟
2.  `zepto` 的 `touch` 模块，`tap` 事件也是为了解决在 `click` 的延迟问题

## 8. 移动端适配 1px 的问题 ##

Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。

.scale-1px-bottom { 
        position: relative;
        border:none;
    }
    .scale-1px-bottom::after { 
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #000;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

同时设置 4 条边框：

.scale-1px { 
        position: relative;
        margin-bottom: 20px;
        border:none;
    }
    .scale-1px::after { 
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

## 9. 屏幕旋转及重力感应事件 ##

#### 屏幕旋转： ####

/* 竖屏时样式 */
    @media all and (orientation:portrait) { }
    /* 横屏时样式 */
    @media all and (orientation:landscape) { }

#### 重力感应事件： ####

// 运用HTML5的deviceMotion，调用重力感应事件
    if (window.DeviceMotionEvent) { 
      document.addEventListener('devicemotion', deviceMotionHandler, false)
    }
    
    let speed = 30;
    let x = y = z = lastX = lastY = lastZ = 0;
    function deviceMotionHandler(eventData) { 
      let acceleration = event.accelerationIncludingGravity;
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;
      if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) { 
        //这里是摇动后要执行的方法 
        fnHander();
      }
      lastX = x;
      lastY = y;
      lastZ = z;
    }
    
    function fnHander() { 
      //do something
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b77763e6eade4145a6ae94fe47f53dcb.png