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

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

在这里插入图片描述

1. 基础 Meta 基础知识：

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

  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
  2. <!-- width 设置viewport宽度，为一个正整数，或字符串‘device-width’ -->
  3. <!-- height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 -->
  4. <!-- initial-scale 默认缩放比例，为一个数字，可以带小数 -->
  5. <!-- minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 -->
  6. <!-- maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 -->
  7. <!-- user-scalable 是否允许手动缩放 -->

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

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

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

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

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

  1. <meta name="format-detection" content="telephone=no, email=no" />

其他meta知识

  1. <!-- 启用360浏览器的极速模式(webkit) -->
  2. <meta name="renderer" content="webkit">
  3. <!-- 避免IE使用兼容模式 -->
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  6. <meta name="HandheldFriendly" content="true">
  7. <!-- 微软的老式浏览器 -->
  8. <meta name="MobileOptimized" content="320">
  9. <!-- uc强制竖屏 -->
  10. <meta name="screen-orientation" content="portrait">
  11. <!-- QQ强制竖屏 -->
  12. <meta name="x5-orientation" content="portrait">
  13. <!-- UC强制全屏 -->
  14. <meta name="full-screen" content="yes">
  15. <!-- QQ强制全屏 -->
  16. <meta name="x5-fullscreen" content="true">
  17. <!-- UC应用模式 -->
  18. <meta name="browsermode" content="application">
  19. <!-- QQ应用模式 -->
  20. <meta name="x5-page-mode" content="app">
  21. <!-- windows phone 点击无高光 -->
  22. <meta name="msapplication-tap-highlight" content="no">

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

  1. 打电话

    打电话给:0755-10086

  2. 发短信，winphone系统无效

    发短信给: 10086

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

    点击我发邮件

    zhangqian0406@yeah.net">点击我发邮件

    zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件

    384900096@qq.com">点击我发邮件

    点击我发邮件

    点击我发邮件

    点击我发邮件

    点击我发邮件

页面通用模板如下：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  7.   <meta content="yes" name="apple-mobile-web-app-capable">
  8.   <meta content="black" name="apple-mobile-web-app-status-bar-style">
  9.   <meta content="telephone=no" name="format-detection">
  10.   <meta content="email=no" name="format-detection">
  11.   <title>标题</title>
  12.   <link rel="shortcut icon" href="/favicon.ico">
  13. </head>
  15. <body>
  16.   这里开始内容
  17. </body>
  19. </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. 人工适配

  1. html {  font-size: 100px; }
  2. @media(min-width: 320px) {  html {  font-size: 100px; } }
  3. @media(min-width: 360px) {  html {  font-size: 112.5px; } }
  4. @media(min-width: 400px) {  html {  font-size: 125px; } }
  5. @media(min-width: 640px) {  html {  font-size: 200px; } }

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

2. fontSize.js

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

  1. (function() { 
  2.   // document.documentElement：获取document的根元素
  3.   var html = document.documentElement
  4.   function onWindowResize() { 
  5.     // html.getBoundingClientRect().width：获取html的宽度(窗口的宽度)
  6.     html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px'
  7.   }
  8.   // 监听window的resize事件
  9.   window.addEventListener('resize', onWindowResize)
  10.   onWindowResize()
  11. })()

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

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

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

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

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

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

  1. input,textarea { 
  2.    -webkit-appearance: none;
  3. }

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

  1. a, img { 
  2.    -webkit-touch-callout: none; 
  3. }

6. calc基本语法

  1. .class { 
  2.   width: calc(expression);
  3. }
  1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。

  2. 可以混合使用百分比(%), px, em, rem等作为单位可进行计算。

    .calc{ 

    1. margin-left:50px;
    2. padding-left:2rem;
    3. width:calc(100%-50px-2rem);
    4. height:10rem;

    }

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

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

事件响应顺序

ontouchstart > ontouchmove > ontouchend > onclick

解决方案：

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

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

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

  1. .scale-1px-bottom { 
  2.     position: relative;
  3.     border:none;
  4. }
  5. .scale-1px-bottom::after { 
  6.     content: '';
  7.     position: absolute;
  8.     left: 0;
  9.     bottom: 0;
  10.     background: #000;
  11.     width: 100%;
  12.     height: 1px;
  13.     -webkit-transform: scaleY(0.5);
  14.     transform: scaleY(0.5);
  15.     -webkit-transform-origin: 0 0;
  16.     transform-origin: 0 0;
  17. }

同时设置 4 条边框：

  1. .scale-1px { 
  2.     position: relative;
  3.     margin-bottom: 20px;
  4.     border:none;
  5. }
  6. .scale-1px::after { 
  7.     content: '';
  8.     position: absolute;
  9.     top: 0;
  10.     left: 0;
  11.     border: 1px solid #000;
  12.     -webkit-box-sizing: border-box;
  13.     box-sizing: border-box;
  14.     width: 200%;
  15.     height: 200%;
  16.     -webkit-transform: scale(0.5);
  17.     transform: scale(0.5);
  18.     -webkit-transform-origin: left top;
  19.     transform-origin: left top;
  20. }

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

屏幕旋转：

  1. function orientScreen() { 
  2.   let orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight ? 'landscape' : 'portrait';
  3.   if (orientChk == 'lapdscape') { 
  4.     //这里是横屏下需要执行的事件
  5.   } else { 
  6.     //这里是竖屏下需要执行的事件
  7.   }
  8. }
  10. orientScreen();
  11. window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () { 
  12.   setTimeout(orientScreen, 100);
  13. }, false)
  15. /* 竖屏时样式 */
  16. @media all and (orientation:portrait) { }
  17. /* 横屏时样式 */
  18. @media all and (orientation:landscape) { }

重力感应事件：

  1. // 运用HTML5的deviceMotion，调用重力感应事件
  2. if (window.DeviceMotionEvent) { 
  3.   document.addEventListener('devicemotion', deviceMotionHandler, false)
  4. }
  6. let speed = 30;
  7. let x = y = z = lastX = lastY = lastZ = 0;
  8. function deviceMotionHandler(eventData) { 
  9.   let acceleration = event.accelerationIncludingGravity;
  10.   x = acceleration.x;
  11.   y = acceleration.y;
  12.   z = acceleration.z;
  13.   if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) { 
  14.     //这里是摇动后要执行的方法 
  15.     fnHander();
  16.   }
  17.   lastX = x;
  18.   lastY = y;
  19.   lastZ = z;
  20. }
  22. function fnHander() { 
  23.   //do something
  24. }

发表评论

表情：
评论列表 （有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读