关键词：
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
（部分安卓手机的UC浏览器写完以后还是可以放大缩小）
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />（iOS上会明显 有时候会把数字当成电话号码）
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
viewport模板
<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">
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）
在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder
webkit表单输入框placeholder的文字能换行么？ios可以，android不行~,在textarea标签下都可以换行~
html,body{
overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}
手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
输入框的兼容性解决
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
文本标签line-height：1或者是line-height等于height文字会被切掉
手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
<button></button>元素一定要写上type属性不然会默认提交表单，出现想不到的bug
某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字
input框若是不想输入文字 只能读不能写可以加readonly属性
手机上用背景图写运动，如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0；
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()
弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()
面包屑导航如果按照bootstrap给li加：after伪元素的话在其他浏览器和在UC浏览器中表现的不一样，UC的的会比其他的浏览器宽，所占位置更多
如果一个手机看到的和其他手机不一样 会比其他的手机大或者小，查看他的浏览器字体设置是否正常，应该是他把手机浏览的字号调小或者调大了（坑人的所谓的bug）
IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
select标签移动端兼容
select选中事件用change，（用click会执行两次）；select标签对移动端的兼容：.custom-selectselect{width:100%;margin:0;background:none;border:1pxsolidtransparent;outline:none;/*Prefixedbox-sizingrulesnecessaryforolderbrowsers*/-we 查看详情
移动端可以兼容fullpage.js吗
参考技术A可以。fullpage.js全屏滚动插件，基于jq库，可以利用它很方便、很轻松的来制作全屏网站；它支持手机、平板触摸事件，也支持CSS3动画，对移动端有很好的兼容性。 查看详情
移动端bug兼容(代码片段)
总结一下目前的移动端开发遇到的问题。1、IOS与安卓input默认样式去除。移动端总有一个默认的圆角或别的。input[type=button],input[type=text],input[type=password]-webkit-appearance:none;outline:none;border-radius:none;2、IOS后退无刷新使用onpageshow主动... 查看详情
移动端300ms兼容问题（移动端经典问题）(代码片段)
移动端300ms延迟原因2007年初。苹果公司在发布首款iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对iPhone这种小屏幕浏览桌面端站点的问题。双击缩放(doubletaptozoom)，这... 查看详情
兼容性测试规范-移动端
摘要：一般的兼容性测试以版本迭代为周期、在产品测试阶段以及上线验证阶段进行。在此规范中将详细说明我们的规范形成依据，以及在此基础上的详细分析和对应的兼容性测试规范，包括如下方面：（1）需要进行兼容... 查看详情
移动端audio音频播放兼容方案
现在很多移动端要求audio播放必需由用户的事件触发，否则就劫持。实际应用中经常会出现JS网络请求通过返回的结果来决定播放什么音频，在移动端是不允许的。当移动需要通过网络请求回调来播放音频时，就得做点准备工作... 查看详情
移动端兼容处理(代码片段)
首先上一段判断android和ios的js代码functionnavigator()varu=navigator.userAgent;varisAndroid=u.indexOf(‘Android‘)>-1||u.indexOf(‘Adr‘)>-1;//android终端varisiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端if 查看详情
移动端兼容问题注意事项
1.IOS移动端click事件300ms的延迟响应移动设备上的web网页有300ms延迟，有时会造成按钮点击延迟或者点击失效。苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上，使用了双击缩放(doubletaptozoom)的方案，发布IOS系统搭载的... 查看详情
移动端布局
...也可以越来越好看随着科技发展布局也分为：pc端布局和移动端布局pc端布局的难点是要兼容每个浏览器→chromeFFIE678，最烦人的是ie，具体的问题自己可以百度移动端不需要兼容每个浏览器，移动端只有一个内核浏览器-webkit-但是... 查看详情
移动端兼容
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（部分安卓手机的UC浏览器写完以后还是可以放大缩小）忽略将页面中的数字... 查看详情
移动端兼容问题(代码片段)
1.华为手机自带浏览器 不支持 text-decoration:underline;解决方案：varua=navigator.userAgent.toLowerCase();if(ua.match(/huawei/==‘huawei‘))$(‘.info-linka‘).css(‘border-bottom‘,‘1pxsolid‘); &n 查看详情
Three.js 示例不完全兼容移动端
】Three.js示例不完全兼容移动端【英文标题】：Three.jsexamplenotcompletelycompatiblewithmobile【发布时间】：2016-01-2316:20:02【问题描述】：我对移动设备上的“后处理/故障”示例有疑问。只是雪效应造成了麻烦。在桌面上，它会在故障期... 查看详情
markdownpad2代码高亮插件兼容移动端样式
...可以查看前一篇文章《MarkdownPad2使用代码高亮插件》先看移动端效果图：移动端点击查看效果 或者手机扫如下二维码：我们经常阅读微信公众号文章的时候，常常看到文章内有高亮的代码，并且这代码不会换行，可以左右拖... 查看详情
pc端移动端兼容的大图轮播(代码片段)
body,htmlwidth:100%;*margin:0;padding:0;list-style:none;.hahalist-style-type:none;.navwidth:100%;height:300px;overflow:hidden;position:relative;.warpheight:300px;position:absolute;.warp.haha 查看详情
关于sessionstorage的移动端兼容问题
最近在开发移动端项目时，需要用到的本地存储的地方不少。都是一些只要记住当前打开窗口的用户数据就行，所以我选择用的sessionStorage。使用场景如下：A.html页面需要记录一条数据{a:1,b:2};sessionStorage.setItem("data","{a:1,b:2}");B.htm... 查看详情
如何兼容移动端（安卓和ios）情况2-移动端开发注意事项(代码片段)
一、meta标签使用1、meta的使用<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>强制让文档的宽度与设 查看详情
移动端部分兼容问题
1、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> （部分安卓手机的UC浏览器写完以后还是可以放大缩小）2、忽略... 查看详情
手机端图片的移动缩放旋转兼容touch
//缩放varinitialScale=1;varcurrentScale=1;touch.on(‘#target‘,‘pinch‘,function(ev){currentScale=ev.scale-1;currentScale=initialScale+currentScale;currentScale=currentScale>1.5?1.5:currentScale;current 查看详情