移动端兼容和问题规避处理

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”/>

视模板

<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）

 

在输入框获得焦点时文字被清空用值在输入框输入文字时被清空用占位符

 

WebKit的表单输入框占位符的文字能换行么？IOS可以，Android的不行〜，在textarea的标签下都可以换行〜

 

HTML，身体{

overflow：hidden; / *手机上写overflow-x：hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白* /

-webkit溢出滚动：触摸; / *流畅滚动，ios7下会有滑一下滑不动的情况，所以需要写上* /

位置：realtive; / *直接子级如果是绝对定位有运动到屏幕外的话，会出现留白* /

 

}

 

手机上的柔性布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

。框{

    显示：-webkit-box; / *老版本语法：Safari，iOS，  Android  浏览器，旧版WebKit浏览器。* /

    显示：-moz-box; / *老版本语法：Firefox（buggy）* /

    显示：-ms-flexbox; / *混合版本语法：IE 10 * /

    显示：-webkit-flex; / *新版本语法：Chrome 21+ * /

显示：flex; / *新版本语法：Opera 12.1，Firefox 22+ * /

}

.box的>利{

-webkit-box-flex：1.0;

box-flex：1.0;

-webkit-flex：1.0;

flex：1;

width：0; / *解决兼容性问题* /

}

 

 

 

输入框的兼容性解决

输入[类型= “文本”]，

输入[类型= “日期”]，

输入[类型= “电话”]，

输入[类型= “电子邮件”]，

输入[类型= “密码”] {

-webkit-appearance：none;

显示：块;

宽度：100％;

身高：0.8公分;

行高：正常; / *手机上的行高不能写成和高度的值一样，会出现再次输入光标靠上的现象* /

背景：无;

font-size：0.32rem;

填充左：0.28rem;

border-radius：0;

-webkit-border-radius：0;

border：1px solid＃d5d5d5;

-moz-box-sizing：border-box;

    -webkit-box-sizing：border-box;

    盒子尺寸：边框;

概要：无;

-webkit-transform：translateZ（0）;

    -moz-transform：translateZ（0）;

    -ms-transform：translateZ（0）;

    -o-transform：translateZ（0）;

    transform：translateZ（0）; / *解决加入js后输入框输入瞬间变白的现象* /

}

 

禁用radio和复选框默认样式

输入[类型= “无线电”] :: - MS-检查，输入[类型= “复选框”] :: - MS-检查{

display：none; / *这样就可以用class自定义样式* /

}

 

WebKit的表单输入框占位符的颜色值

输入:: - WebKit的输入占位符{颜色：＃999;}

输入：焦点:: - WebKit的输入占位符{颜色：＃999;}

 

手机上的多行省略

.overflow隐藏{

显示：box！important;

显示：-webkit-box！重要;

溢出：隐藏;

文本溢出：省略号;

-webkit-box-orient：vertical;

-webkit-line-clamp：4; / *第几行出现省略号* /

/ *文字对齐：证明;不能和溢出隐藏的代码一起写，会有错误* /

}

文本标签行高：1或者是线高度等于高度文字会被切掉

 

手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题，尽量不要写高，因为内容多少不固定

 

给不同屏幕大小的手机设置特殊样式

 

@media唯一屏幕和（最小设备宽度：320px）和（最大设备宽度：375px）{}

 

<按钮> </按钮>元素一定要写上键入属性不然会默认提交表单，出现想不到的缺陷

 

某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字

input框若是不想输入文字只能读不能输写可以加readonly属性

手机上用背景图写运动，如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size：图的个数* 100％0;

写背景图时最好加上左上角或者0 0不写写运动效果时容易出现跳

 

弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault（）

弹层弹出后不允许屏幕滚动给弹层加鼠标移动事件event.preventDefault（）

面包屑导航如果按照引导给李加：后伪元素的话在其他浏览器和在UC浏览器中表现的不一样，UC的的会比其他的浏览器宽，所占位置更多

 

如果一个手机看到的和其他手机不一样会比其他的手机大或者小，查看他的浏览器字体设置是否正常，应该是他把手机浏览的字号调小或者调大了（坑人的所谓的BUG）

 

IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级

 

苹果手机固定定位有bug检查html和body是不是设置了overflow-x：hidden;