ios兼容问题整理

ios兼容问题整理

meta用法

//禁止屏幕缩放，强制文档宽度与设备宽度1:1，防止ios因缩放出现滚动条，导致定位bug
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<!-- 禁止手机号长按呼出  忽略邮箱状态-->
// ios 在ios上会被识别电话号码，显示颜色，改变样式也不生效，所以禁用
<meta name="format-detection" content="telephone=no, email=no" />

//iphone私有标签，允许全屏浏览
<meta name="apple-mobile-web-app-capable" content="yes" />

//标题头部的颜色  必须配合全屏才生效
// content值 ： default（白色），black（黑色）black-translucent（灰色半透明；black-translucent”将会占据页面px位置，浮在页面上方
（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

iOS 与 OS X 端字体兼容

ios 横屏时会重置字体大小

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;   

如果仅仅在移动端，则text-size-adjust：none即可，桌面端使用字体缩放失效，最佳方案为text-size-adjust:100%;

IOS移动端click事件300ms的延迟响应

移动端双击缩放、双击滚动等移动端浏览器默认的行为设置，使得用户再执行这些操作时，会先判断用户是否触发默认行为的判断，导致移动端点击事件存在300ms的等待

解决方案

• 1、禁用缩放，用户无法缩放

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

• 2、设置视口宽度，识别网站的适配，禁用浏览器默认的双击缩放行为，用户仍可自己缩放