移动端H5页面自适应手机屏幕宽度

1.因为本人使用的是sublime.text，使用rem就能够达到效果。

点击菜单中的preferences下的browse packages，选择cssrem-master，添加或者编写cssrem.sublime-settings文件。

设置px_to_rem的值为75便可。

在代码里输入设置的对应px值，按TAB键就能够转换为rem

 

在使用时，同事引用flexible.js文件

2.<meta name="apple-mobile-web-app-capable" content="yes">

下面（）里的不用

（使用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动态生成此标签，固然，应该先获取屏幕尺寸。）

<script type="text/javascript">
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

3.微信分享要引用的<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

4.使用媒体查询功能   好比兼容iphone的样式 @media only screen and (min-device-width : 320px) and (max-device-height : 460px){}

作到以上几点，基本的自适应就能够了