江苏龙网

  1. 主页 > 生活百科 > >

中高级前端必须注意的40条移动端H5坑位指南( 二 )

h5

打开支付宝的蚂蚁森林复制代码禁止页面缩放在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面 。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局 。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">复制代码禁止页面缓存Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！
<meta http-equiv="Cache-Control" content="no-cache">复制代码禁止字母大写有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦 。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能 。
<input autocapitalize="off" autocorrect="off">复制代码针对Safari配置贴一些Safari较零散且少用的配置 。
<!-- 设置Safari全屏，在iOS7+无效 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 --><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 添加页面启动占位图 --><link rel="apple-touch-startup-image" href=https://www.isolves.com/it/cxkf/ydd/html5/2021-03-18/"pig.jpg" media="(device-width: 375px)">复制代码针对其他浏览器配置贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器 。从网易MTL的测试数据得知，新版的QQ浏览器和UC浏览器已不支持以下<meta>声明了 。
<!-- 强制QQ浏览器竖屏 --><meta name="x5-orientation" content="portrait"><!-- 强制QQ浏览器全屏 --><meta name="x5-fullscreen" content="true"><!-- 开启QQ浏览器应用模式 --><meta name="x5-page-mode" content="app"><!-- 强制UC浏览器竖屏 --><meta name="screen-orientation" content="portrait"><!-- 强制UC浏览器全屏 --><meta name="full-screen" content="yes"><!-- 开启UC浏览器应用模式 --><meta name="browsermode" content="application"><!-- 开启360浏览器极速模式 --><meta name="renderer" content="webkit">复制代码让:active有效，让:hover无效有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态 。给<body>注册一个空的touchstart事件可将两种状态反转 。
<body ontouchstart></body>复制代码CSS方向自动适应布局针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理 。
笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示 。
function AutoResponse(width = 750) {const target = document.documentElement;if (target.clientWidth >= 600) {target.style.fontSize = "80px";} else {target.style.fontSize = target.clientWidth / width * 100 + "px";}}AutoResponse();window.addEventListener("resize", () => AutoResponse());复制代码当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，这样就能节省上述代码 。不对，是完全代替上述代码 。
html {font-size: calc(100vw / 7.5);}复制代码若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理 。1024px以下使用rem布局，否则不使用rem布局 。
@media screen and (max-width: 1024px) {html {font-size: calc(100vw / 7.5);}}复制代码自动适应背景使用rem布局声明一个元素背景，多数情况会将background-size声明为cover 。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙 。
此时将background-size声明为100% 100%，跟随width和height的变化而变化 。反正width和height都是量好的实际尺寸 。


推荐阅读


上一篇：香蕉的故事的儿童故事 一根香蕉引发的故事

下一篇：科学家发现新的地球 地球之外是有生命存在,是人类一直探索的宇宙之谜