常见的移动端的问题

一、什么是Retina显示屏，带来了什么问题

　　1、retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样大小的屏幕上，苹果设备的retina显示屏中，像素点由1个变为4个；

　　2、在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍；

　　3、那么，前端的对应方案是：①设计稿切出来的图片长宽保证为偶数，并使用background-size把图片缩小为原来的1/2；②其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

二、百度禁止转码

　　通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常恶心。不过我们可以通过meta标签来禁止它：

　　<meta  http-equiv="Cache-Control"  content="no-siteapp"/>

三、移动端手机号识别（IOS）

　　在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，可以通过meta标签来关闭电话号码的自动识别：

　　<meta  name="format-detection"  content="telephone=no"  />

　　1、开启电话功能：<a  href="tel:123456">123456</a>

　　2、开启短信功能：<a  href="sms:123456">123456</a>

四、移动端邮箱识别（Android）

　　1、与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过meta标签关闭：

　　<meta  name="format-detection"  content="email=no" />

　　2、同样的，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

　　<a  mailto:123456@gmail.com>123456@gmail.com</a>　

五、iso系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

　　元素{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

六、webkit表单元素的默认外观怎么设置

　　.css{ -webkit-appearance:none; }

七、禁止文本缩放

　　html { -webkit-text-size-adjust:100%; }

八、移动端禁止选中内容

　　如果你不想用户可以选中页面中的内容，那么如下设置：

　　.css{ -webkit-user-select:none; }　

九、禁止保存或拷贝图像（IOS）

　　img { -webkit-touch-callout:none; }

十、摇一摇功能

　　HTML5  deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据

十一、android上去掉语音输入按钮

　　input::-webkit-input-speech-button { display:none; }

十二、移动端基础框架：zepto.js搭配backbone  underscore

十三、css动画链接：https://daneden.github.io/animate.css/

转载于:https://www.cnblogs.com/carriezhao/p/7122028.html