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

最新推荐文章于 2024-07-11 13:45:07 发布

淘淘是只狗

最新推荐文章于 2024-07-11 13:45:07 发布

阅读量1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43477721/article/details/110085204

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

在这里插入图片描述

1. 基础 Meta 基础知识：

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

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

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

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

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

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

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

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

其他meta知识

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

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

打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

发短信，winphone系统无效

<a href="sms:10086">发短信给: 10086</a>

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

<!-- 1.普通邮件 -->
<a href="mailto:863139978@qq.com">点击我发邮件</a>
<!-- 2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）-->
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
<!-- 3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）-->
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
<!-- 4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址 -->
<a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
<!-- 5.包含主题，用?subject= -->
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
<!-- 6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 -->
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
<!-- 7.内容包含链接，含http(s):等的文本自动转化为链接 -->
<a href="mailto:863139978@qq.com?body=http:<!-- www.baidu.com">点击我发邮件</a>
<!-- 8.内容包含图片（PC不支持）-->
<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);
}

支持使用 “+”,”-“,”*” 和 “/” 四则运算。
可以混合使用百分比(%), 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

解决方案：

fastclick 可以解决在手机上点击事件的 300ms 延迟
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. 屏幕旋转及重力感应事件

屏幕旋转：

function orientScreen() {
  let orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight ? 'landscape' : 'portrait';
  if (orientChk == 'lapdscape') {
    //这里是横屏下需要执行的事件
  } else {
    //这里是竖屏下需要执行的事件
  }
}

orientScreen();
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
  setTimeout(orientScreen, 100);
}, false)

/* 竖屏时样式 */
@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
}

淘淘是只狗

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
H5 移动端开发知识及解决方案

移动开发基本知识点1、基础Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般
复制链接

扫一扫