前言
这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究。
知识要点
1. Meta标签
- 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
- 2.禁止ios上自动识别电话
<meta content="telephone=no" name="format-detection" />
- 3.禁止android上自动识别邮箱
<meta content="email=no" name="format-detection" />
- 4.针对ios上的safari上地址栏和顶端样式条的
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 听说在ios7以上版本就没效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent 但是我都是用black-->
2. JS和jquery获取各种屏幕的宽度和高度的代码
// javascript:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
// Jquery:
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
3. 打电话发短信
<a href="tel:020-88888888">打电话给:020-88888888</a>
<a href="sms:911">发短信给: 911</a>
4. 图片优化
- 1.base64编码图片替换url图片;
- 2.图片压缩,提供一个网站用于压缩;
- 3.图片懒加载;
-
4.img和background
- img:html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载;
- background:以css背景图存在的图片background会等到结构加载完成(网页的内容全部显示以后)才开始加载;
so,网页会先加载标签img的内容,再加载背景图片background引用的图片
5. H5禁止手机屏幕横屏的变相操作
移动设备上的页面,当屏幕旋转的时候会有一个orientationchange事件,可以给body元素增加此事件的监听:
<body onOrientationchange="updateOrientation();">
进入监听方法中,通过window。orientation来获取当前屏幕的状态:
- 0 --- 竖屏
- 90 --- 逆时针旋转横屏
- -90 --- 顺时针旋转横屏
- 180 --- 竖屏,上下颠倒
解决方法:
- 1.你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向;
- 2.此方法只适用于安卓手机
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
技巧与必知
1. 原生js的事件监听和jquery的事件绑定在ios中失效:
使用事件监听或事件绑定时,由于父元素选择body或document元素,导致在ios中事件触发无效,所以不使用body和document元素作为父级元素。
2. navigator.onLine兼容性问题,需谨慎使用;
3. ios中日期显示为NaN:
Date的日期格式,在ios中有兼容性问题,ios的日期会显示成:NaN;
解决方法:在ios中支持"2017/12/26 19:36:00",而不支持"2017-12-26 19:36:00"格式,后面一种格式,在ios中显示Nan (Android中都可以显示正常)
4. 移动端1px的问题:
由于不同的手机有不同的像素密度,css中的1px并不等于移动设备的1px。项目中使用js和rem做移动端的屏幕适配,所以产生0.5px的情况,导致低版本的手机展示不了0.5px的边框。
解决方法:使用css解决1px的问题,并且给需要设置成1px的dom元素直接写上:border-width:1px;
5. 页面滚动条问题:
web页面在PC浏览器上浏览时有滚动条;但是,在移动端浏览器打开时,没有滚动条
解决方法:将页面的最外层(我一般在写页面时,会在body标签内写一个大容器,用于存放页面的内容)设置overflow:auto/scroll;并且不能设置height属性的值(height:100%也不行)
6. 长按闪退的问题:
列表页的列表项时(触摸到文字),在低版本手机中会出现闪退的情况
解决方法:
js部分:在事件触发时添加e.preventDefault();,用于阻止默认行为
css部分:添加禁止文本文本复制的代码 -webkit-touch-callout: none; user-select: none;
7. ios中,除body外的局部滚动,会出现卡顿问题
解决方案:在要滚动元素上加上
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
8. 在ios上,input默认样式和表单的disabled属性带来的重影样式
- 1.去掉input的默认样式
input,button,textarea{-webkit-appearance: none;}
- 2.因为ios默认了disabled属性时透明度为0.8,解决:
input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }
9. 慎用fixed布局
css中position: fixed定位会因为其父元素上可能设置了transform属性而失效。
微信端
1. 安卓在微信端不能使用window.location.reload()
解决方法:使用url地址后加随机数来解决
2. ios下的微信页面背景音乐无法自动播放问题
这个问题我有遇到过,然后网上了找了解决方法,但是没有效果,所以只能改用开始移动播放音乐。
Other
- zepto的scroll事件默认绑在window上的
- app抓包
- 浏览器连接安卓机测试