移动端安卓和ios兼容性汇总,web ios android 兼容开发

　　以前我在pc端的时候，也遇到过兼容性问题，但是说实话，脑子里全是ie的问题，没什么特别需要注意的。也许我不善于总结。现在在移动端(我以为移动端很容易，所以没关注)。所以，我错了，我为我的轻视和傲慢付出了代价！

　　最近遇到一些兼容性bug，从网上找资料。

　　先说视口

　　首个模板

　　meta charset=utf-8 ！-主要I是强制文档宽度与设备宽度1:1，最大宽度1.0，禁止屏幕缩放。-meta content= width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no name= viewport ！-这也是iphone的私有标签，允许全屏浏览。-meta content= yes name= apple-mobile-we B- app-capable ！-iphone的私有标签，iPhone顶部状态栏的样式。-meta content= black name= apple-mobile-we B- app-status-bar-style ！-禁止号码被自动识别为电话号码。这很有用，因为一串数字在iphone上会以蓝色显示，样式加其他颜色不会生效。-meta content= telephone=no name= format-detection ！-无邮件标识-meta content= email=No name= format-detection 写背景图片的时候最好加左上方或者0 0，不然写动作特效的时候很容易跳转。

　　禁止复制和选择文本。El {-WebKit-用户选择：无；-moz-user-select:无；-khtml-user-select:无；用户选择：无；}苹果手机的固定定位有个bug。检查html和body是否设置了overflow-x:hidden；

　　为不同屏幕尺寸的手机设置特殊样式。

　　@ media only screen and(min-device-width:320 px)和(max-device-width:375 px){ } iOS对输入键盘事件keyup、keydown和keypress的支持不是很好。用input来监控键盘keyup事件，在Android手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入后，并不会立即响应keyup事件，只能在删除后再响应。

　　方法：可以使用html5的oninput事件代替keyup。

　　input type= text id= testInput script type= text/JavaScript document . getelementbyid( input )。addEventListener(input ，function(e){ var value=e . target . value；});/scriptios设置输入按钮样式将被默认样式覆盖。

　　解决方案如下：

　　input，textarea { border:0；-WebKit-外观：无；}消除IE10中十字：input:-ms-clear { display:none；}手机上flex布局会有兼容性问题。安卓手机只使用新版本无法识别别人。flex布局不支持Android低版本的flex-wrap:wrap属性，但ios系统支持wrap属性。这个时候怎么解决这个问题？当然，我们不用换行符，而是用其他方式代替。box { display:-WebKit-box；/*旧版本语法：Safari，iOS，Android浏览器，旧版WebKit浏览器。*/display:-moz-box；/*旧版本语法：Firefox(Buggy)*/display:-ms-flexbox；/*混合版本语法：IE 10 */display:-WebKit-flex；/*新版本语法：Chrome 21 */display:flex；/*新版本语法：Opera 12.1，Firefox 22 */} input的占位符属性会使文本位置向上。

　　行高：(与输入框的高度一样高)- pc端解决方案

　　行高：普通移动解决方案

　　输入type=number后，pc上会出现上下箭头。

　　输入：-webkit-outer-spin-button，输入：-WebKit-inner-spin-button {-WebKit-appearance:无！重要；边距：0；}启用android和ios手机打开相机，选择相册功能。

　　class= js _ upfile cover 1 type= file name= cover accept= image/* capture= camera multiple/$(function(){//获取浏览器的userAgent并转换为小写varua=navigator . user agent . to lower case()；//确定是否是苹果手机，如果是，则为true var isios=(ua . index of( iPhone )！=-1) (ua.indexOf(ipad )！=-1);if (isIos) { $(input:file )。remove attr( capture )；};})以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读