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

Posted 2020-09-01 惊觉小菜鸟

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){}

做到以上几点，基本的自适应就可以了