meta元标签
【问题1】iphone页面会自动把数字当成电话号码点击后自动跳到电话拨号界面
<meta name="format-detection" content="telephone=no" />
【问题2】微信浏览器自动调整页面字体大小
方案*禁止微信浏览器调整页面字体大小
*body{-webkit-text-size-adjust:100%;!important}
【问题3】`用户随意选中页面文字及图片
方案:如无文本选中需求,此为必选项
【问题4】iPhone长按图片保存图片弹窗
方案:关闭长按图片保存图片弹窗
【问题5】 iPhone输入框的光标发生位移,上移或者下移
方案:不要设置line-height即可
【问题6】苹果手机上的input按钮自带渐变效果
方案:加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉
【问题7】表单input元素获取焦点时页面被放大
方案:
user-scalable改为no即可
【问题8】iPhone移动端input 无法获取焦点方案:把-
webkit-user-select:none
改成-webkit-user-select:auto;
覆盖掉或者直接注释掉就行,如果项目需要,就不用注释了。
【问题9】360浏览器兼容模式打开项目无法正常浏览
**
- 原理:http-equiv=“X-UA-Compatible” 这是一个文档兼容模式的定义, Edge模式告诉IE以最高级
模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。
**
FastClick插件
涉及属性1:
text-size-adjust:100%;用百分比来指定文本大小在设备尺寸不同的情况下如何调整
涉及属性2:
-webkit-overflow-scrolling:touch;快速滚动和回弹的效果,允许独立的滚动区域和触摸回弹,WebKit私有的属性
涉及属性3:
tap-highlight-color:transparent;
;当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色。
涉及属性4:
appearance:none;解决iPhone圆角问题
appearance允许使元素看上去像标准的用户界面元素
移动端开发模板