移动端viewport（处理移动端的常见的兼容性的问题都有什么）

本文目录

• 处理移动端的常见的兼容性的问题都有什么
• 移动端，获取手机屏幕的宽，应该怎么做
• 如何实现移动端字体自适应
• 一般移动端页面怎么适配ios页面
• 移动端网页设置的viewport 设置target-densitydpi有什么作用

处理移动端的常见的兼容性的问题都有什么

1.定位问题：ios

2.写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

3.防止手机中网页放大和缩小:《meta name=“viewport“ content=“user-scalable=0“ /》

4.设置Web应用是否以全屏模式运行:《meta name=“apple-mobile-web-app-capable“ content=“yes“》,content的默认值是no

5.自动识别电话号码:《meta name=“format-detection“ ontent=“telephone=no“》,telephone=no可以禁用这功能,默认值是no

6.禁止复制、选中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7.设置缓存:
《meta http-equiv=“Cache-Control“ content=“no-cache“ /》
8.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

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

10.给不同屏幕大小的手机设置特殊样式:
@media only screen and (min-device-width : 320px)
and (max-device-width : 375px){ }
11.IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在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;
});
《/script》
12.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13.消除 IE10 里面的那个叉号:
input:-ms-clear{display:none;}
14.关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ’’); （BY三人行慕课）

移动端，获取手机屏幕的宽，应该怎么做

网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： 《meta name=“viewport“ content=“width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no“/》 如果你完全不了解这个标签的使用需要先百度一下。 解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。 2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。 3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。 4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。 以上是使用viewport标签的一些小体会，分享给大家。

如何实现移动端字体自适应

最佳实践：
1、在viewport中将width设置为device-width, 如：
《meta name=“viewport“ content=“width=device-width“》

2、并且将网页设计成自适应方式
先有再优才是王道
CSS中关于分辨率宽度设置：
宽度可以使用320px为标准，图片宽度可以以640px为标准。
这样一方面兼容了低分辨率的低端机，一方面兼容了高分辨率的高端机，缺点是可能会浪费些流量，但开发效率上来讲那是极好的，要保证。
字体单位设置
几个网站中大概使用了以下几个单位
Fontsize单位：px, em, %, rem
只有淘宝首页使用了rem这个单位，果然是淘宝的UED比较喜欢尝试新的东西，这个单位是CSS3中新加入的，结合了em与px的优点，摒弃了em与px的(不易操控)缺点
关于字体单位详细介绍可以参考这片文章
Viewport中的initial-scale值

一般移动端页面怎么适配ios页面

1、viewport 简单粗暴的方式：
《meta name=“viewport“ content=“width=320,maximum-scale=1.3,user-scalable=no“》

直接设置viewport为320px的1.3倍，将页面放大1.3倍。
为什么是1.3？
目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320 = 1.171875，iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*iphone 6*/
}

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*iphone 6 plus*/
}

PS: 也可以直接使用实际的device-width：如 device-width : 375px
在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+ 都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
REM与PX的换算可以查看网址：

移动端网页设置的viewport 设置target-densitydpi有什么作用

target-densitydpi 这个私有属性，表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持，并且安卓已经决定要废弃 target-densitydpi 这个属性了，尽量避免使用这个属性。