1200字范文 > 移动端页面开发通用问题解决方案

移动端页面开发通用问题解决方案

时间：2020-08-07 02:54:03

相关推荐

移动端页面开发通用问题解决方案

1、使各个手机型号展示的css页面相同的问题

解决方案：引入reset.css文件

1 @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} 2 body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} 3 body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif} 4 h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} 5 h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif} 6 h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} 7 address,cite,dfn,em,i,optgroup,var{font-style:normal} 8 table{border-collapse:collapse;border-spacing:0;text-align:left} 9 caption,th{text-align:inherit}10 ul,ol,menu{list-style:none}11 fieldset,img{border:0}12 img,object,input,textarea,button,select{vertical-align:middle}13 article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}14 audio,canvas,video{display:inline-block;*display:inline;*zoom:1}15 blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}16 textarea{overflow:auto;resize:vertical}17 input,textarea,button,select,a{outline:0 none;border: none;}18 button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}19 mark{background-color:transparent}20 a,ins,s,u,del{text-decoration:none}21 sup,sub{vertical-align:baseline}22 html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}23 body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}24 hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}25 a {color: #25a4bb;text-decoration: none;}

2、移动端1像素边框问题

由于移动端的屏幕的分辨率不同，比较好一点的手机屏幕的分辨率高，可能是二倍屏或者是3倍屏，这样的话，我们写border:1px solid black; 这样的代码，实际在这种高分辨率的屏幕上显示的是2px或者3px。

解决方案：引入一个border.css文件，代码如下：

1 @charset "utf-8"; 2 .border, 3 .border-top, 4 .border-right, 5 .border-bottom, 6 .border-left, 7 .border-topbottom, 8 .border-rightleft, 9 .border-topleft, 10 .border-rightbottom, 11 .border-topright, 12 .border-bottomleft { 13 position: relative; 14 } 15 .border::before, 16 .border-top::before, 17 .border-right::before, 18 .border-bottom::before, 19 .border-left::before, 20 .border-topbottom::before, 21 .border-topbottom::after, 22 .border-rightleft::before, 23 .border-rightleft::after, 24 .border-topleft::before, 25 .border-topleft::after, 26 .border-rightbottom::before, 27 .border-rightbottom::after, 28 .border-topright::before, 29 .border-topright::after, 30 .border-bottomleft::before, 31 .border-bottomleft::after { 32 content: "\0020"; 33 overflow: hidden; 34 position: absolute; 35 } 36 /* border 37 * 因，边框是由伪元素区域遮盖在父级 38 * 故，子级若有交互，需要对子级设置 39 * 定位及 z轴 40 */ 41 .border::before { 42 box-sizing: border-box; 43 top: 0; 44 left: 0; 45 height: 100%; 46 width: 100%; 47 border: 1px solid #eaeaea; 48 transform-origin: 0 0; 49 } 50 .border-top::before, 51 .border-bottom::before, 52 .border-topbottom::before, 53 .border-topbottom::after, 54 .border-topleft::before, 55 .border-rightbottom::after, 56 .border-topright::before, 57 .border-bottomleft::before { 58 left: 0; 59 width: 100%; 60 height: 1px; 61 } 62 .border-right::before, 63 .border-left::before, 64 .border-rightleft::before, 65 .border-rightleft::after, 66 .border-topleft::after, 67 .border-rightbottom::before, 68 .border-topright::after, 69 .border-bottomleft::after { 70 top: 0; 71 width: 1px; 72 height: 100%; 73 } 74 .border-top::before, 75 .border-topbottom::before, 76 .border-topleft::before, 77 .border-topright::before { 78 border-top: 1px solid #eaeaea; 79 transform-origin: 0 0; 80 } 81 .border-right::before, 82 .border-rightbottom::before, 83 .border-rightleft::before, 84 .border-topright::after { 85 border-right: 1px solid #eaeaea; 86 transform-origin: 100% 0; 87 } 88 .border-bottom::before, 89 .border-topbottom::after, 90 .border-rightbottom::after, 91 .border-bottomleft::before { 92 border-bottom: 1px solid #eaeaea; 93 transform-origin: 0 100%; 94 } 95 .border-left::before, 96 .border-topleft::after, 97 .border-rightleft::after, 98 .border-bottomleft::after { 99 border-left: 1px solid #eaeaea;100 transform-origin: 0 0;101 }102 .border-top::before,103 .border-topbottom::before,104 .border-topleft::before,105 .border-topright::before {106 top: 0;107 }108 .border-right::before,109 .border-rightleft::after,110 .border-rightbottom::before,111 .border-topright::after {112 right: 0;113 }114 .border-bottom::before,115 .border-topbottom::after,116 .border-rightbottom::after,117 .border-bottomleft::after {118 bottom: 0;119 }120 .border-left::before,121 .border-rightleft::before,122 .border-topleft::after,123 .border-bottomleft::before {124 left: 0;125 }126 @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {127 /* 默认值，无需重置 */128 }129 @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {130 .border::before {131width: 200%;132height: 200%;133transform: scale(.5);134 }135 .border-top::before,136 .border-bottom::before,137 .border-topbottom::before,138 .border-topbottom::after,139 .border-topleft::before,140 .border-rightbottom::after,141 .border-topright::before,142 .border-bottomleft::before {143transform: scaleY(.5);144 }145 .border-right::before,146 .border-left::before,147 .border-rightleft::before,148 .border-rightleft::after,149 .border-topleft::after,150 .border-rightbottom::before,151 .border-topright::after,152 .border-bottomleft::after {153transform: scaleX(.5);154 }155 }156 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {157 .border::before {158width: 300%;159height: 300%;160transform: scale(.33333);161 }162 .border-top::before,163 .border-bottom::before,164 .border-topbottom::before,165 .border-topbottom::after,166 .border-topleft::before,167 .border-rightbottom::after,168 .border-topright::before,169 .border-bottomleft::before {170transform: scaleY(.33333);171 }172 .border-right::before,173 .border-left::before,174 .border-rightleft::before,175 .border-rightleft::after,176 .border-topleft::after,177 .border-rightbottom::before,178 .border-topright::after,179 .border-bottomleft::after {180transform: scaleX(.33333);181 }182 }

3、移动端中点击延迟的问题

在移动端的某些浏览器上点击click会延迟300毫秒再执行

解决方案：

项目中安装 fastclick 第三方的包安装到项目依赖中：npm install fastclick --save 命令进行安装。

移动端上touch事件有四个，其触发顺序为：touchstart -> touchmove -> touchend -> touchcancel

注：对于某些 android 系统 touch 的 bug:

比如手指在屏幕由上向下拖动页面时，理论上是会触发一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。

4、<meta>元素

meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：

1 // 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 2 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> 3 4 // 禁止百度SiteApp转码声明 5 <meta http-equiv="Cache-Control" content="no-siteapp"> 6 7 // 禁止自动识别电话和邮箱； 8 <meta name="format-detection" content="telephone=no, email=no"> 9 10 // 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；11 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">12 13 // 添加到 IOS 主屏后的标题 14 <meta name="apple-mobile-web-app-title" content="去哪">15 16 // 隐藏地址栏，启用 WebApp 全屏模式17 <meta name="apple-mobile-web-app-capable" content="yes">18 19 // 优先使用 IE 最新版本和 Chrome20 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">21 22 // 注明作者23 <meta name="author" content="">

5、font-family 字体选择

iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

6、使用 rem 替代 em 单位

rem（root element，html）是 CSS3 新增的一个相对单位，相对于根目录的 em 而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是 html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。从而可以有效的快速保持任何分辨率下保持视觉一致。

7、禁止选择

当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。

a, img {-webkit-touch-callout:none; /* 禁止长按链接与图片弹出菜单 */}html, body {-webkit-user-select:none; /* 禁止选中文本（如无文本选中需求，此为必选项） */user-select:none;}

8、html5重力感应事件

手机摇一摇抽奖，大部分核心代码就是这个。

1 if (window.DeviceMotionEvent) { 2 window.addEventListener('devicemotion',deviceMotionHandler, false); 3 } 4 var speed = 30;//speed 5 var x = y = z = lastX = lastY = lastZ = 0; 6 function deviceMotionHandler(eventData) { 7 var acceleration =event.accelerationIncludingGravity; 8 x = acceleration.x; 9 y = acceleration.y;10 z = acceleration.z;11 if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {12 alert('别摇那么大力嘛...');13 // your code here14 }15 lastX = x;16 lastY = y;17 lastZ = z;18 }

9、开启硬件加速优化动画效果

如果你涉及到动画制作，是否经常发现在PC端效果非常不错，但是到了手机上就卡翔了。这个时候我们可以通过CSS开启硬件加速来改善动画效果，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速。CSS animations, transforms 以及 transitions 默认是不会自动开启GPU加速，而是需要某些CSS规则来触发，例如：transform: translate3d。开启硬件加速后可以解决页面闪白等问题，可以让渲染更流畅。