前言这些大部分是我遇到过的情况，也有一些借鉴了同行的文章。如果遇到其他坑，欢迎大家站出来一起学习。知识点一、meta标签1、禁止用户缩放页面，页面强制保持文档宽度和设备宽度1:12。禁止在ios上自动识别手机3.禁止在android上自动识别邮箱4.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());//浏览器当前窗口documentbody的高度 alert($(document.body).outerHeight(true));//总heightofthebrowsercurrentwindowdocumentbodyincludesborderpaddingmargin alert($(window).width());//Browse浏览器当前窗口可视区域的宽度 alert($(document).width());//浏览器当前宽度ntwindowdocumentobject alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true));//浏览器当前窗口documentbody的总宽度包括borderpaddingmargin})3.打电话和发短信拨打：020-88888888发短信至：9114.图片优化1.base64编码图片替换url图片；2.图片压缩，提供一个网站用于压缩；3、图片懒加载；4、img和backgroundimg：html中的标签img是网页结构的一部分，在加载结构的时候会和其他标签一起加载；background：作为css背景图片存在的图片背景，会等到结构加载完毕（网页所有内容显示完毕后）再加载；所以，网页会先加载标签img的内容，再加载背景图片background引用的图片5.H5禁止手机屏幕横屏操作在页面上，屏幕旋转时，会有方向改变事件。您可以将此事件的侦听器添加到body元素：通过窗口输入侦听器方法。orientation获取当前屏幕状态：0---竖屏90---逆时针旋转横屏-90---顺时针旋转横屏180---竖屏，倒置解决方法：1.可以在设备旋转时间监控中，body使用CSS3中transition中的旋转来保持页面垂直；2、此方法仅适用于安卓手机Skillsandmust-knows1.Nativejs事件监听和jquery事件绑定在ios中无效：当使用事件监听或者事件绑定时，因为父元素选择了body或者document元素,事件触发器在ios中无效，所以body和docum没有使用ent元素作为父元素。2.Navigator.onLine兼容性问题，谨慎使用；3、日期在ios显示为NaN：Date的日期格式，在ios有兼容性问题，ios的日期会显示为：NaN；解决方法：在ios中支持"2017/12/2619:36:00"，不支持"2017-12-2619:36:00"格式，后者格式在ios中显示Nan（在Android中可以正常显示）4.移动端1px的问题：由于不同的手机像素密度不同，css中的1px不等于移动设备上的1px。项目使用js和rem进行手机屏幕适配，所以出现0.5px的情况，导致低版本手机不显示0.5px边框。解决方法：使用css解决1px的问题，直接在需要设置1px的dom元素中写入：border-width:1px；5、页面滚动条问题：PC浏览器浏览网页有滚动条；,手机浏览器打开没有滚动条解决方法：在页面最外层设置overflow:auto（我写页面的时候一般会在body标签里写一个大容器用来存放页面内容）/滚动;并且不能设置height属性的值（height:100%不起作用）6.长按闪退问题：当列表项在列表页（触摸文字）时，low会出现闪退-版本手机解决方案：js部分：添加e.preventDefault();当事件被触发时，为了防止默认行为css部分：添加禁止文本复制的代码-webkit-touch-callout:none;用户选择：无；7。在ios中，除body外的部分滚动会导致卡住的问题。解决方法：添加-webkit-overflow-scrolling:touch;溢出滚动：触摸；到要滚动的元素。8、ios上，input默认样式和form的disabled属性带来的ghosting样式1.去掉默认input样式input,button,textarea{-webkit-appearance:none;}2.因为ios默认是disabled属性，透明度0.8，解决方法：input:disabled,input[disabled]{-webkit-opacity:1;不透明度：1;}9.固定布局css位置使用要谨慎：固定定位会失效，因为可能在其父元素上设置了transform属性。微信端1.Android无法在微信上使用window.location.reload()。解决方法：使用url地址后跟一个随机数来解决问题。2、ios下微信页面背景音乐无法自动播放。我以前遇到过这个问题。后来在网上找了解决办法，但是没有用，只好开始搬家改播放音乐了。Otherzepto的scroll事件默认绑定在window上的app，抓取浏览器连接安卓机测试实用网站灵活适配测试兼容性网站前端开发Yahoo36优化指南
