移动端屏幕尺寸适配方案

刺骨的言语ヽ痛彻心扉 2022-06-12 07:52 428阅读 0赞

*最近更新时间：2017年12月14日19:38:19*

[《我的博客地图》][Link 1]

目前移动端分为APP、APP内嵌webview、H5，在项目整体配置上，只要遵循标准，完全可以适配和兼容所有手机屏幕尺寸。

1、H5项目-动态解决方案

var pixelRatio = 1 / window.devicePixelRatio;  
//通过js动态设置视口(viewport)  
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',' +  
'maximum-scale='+pixelRatio+'" />');  
// 获取html节点  
var html = document.getElementsByTagName('html')\[0\];  
// 获取屏幕宽度  
var pageWidth = html.getBoundingClientRect().width;  
// 屏幕宽度 / 固定数值 = 基准值  
html.style.fontSize = pageWidth / 37.5 + "px";//750÷20=37.5

上一行代码37.5的来源是以PSD设计图宽度750px像素为例（iPhone6手机屏幕宽度），在进行页面布局时，加入某个div宽度为100px，可以写作5rem。

备注：

window.devicePixelRatio，dpr设备像素比，是指像素点占的尺寸，如iPhone的常规屏幕的dpr为2，表示屏幕两个点阵占一个像素，plus 3表示屏幕三个点阵占一个像素；

扩展一：-devicePixelRatio

window.devicePixelRatio设备像素比,设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

非视网膜屏幕手机，window.devicePixelRatio等于1；

视网膜屏幕手机，屏幕物理像素640px，独立像素320px，window.devicePixelRatio等于2

详情参考 [张鑫旭][Link 2] 文章

扩展二：getBoundingClientRect()

getBoundingClientRect()方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。  
var box=document.getElementById('box');         // 获取元素  
alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离  
alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离  
alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离  
alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离  
注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。  
document.documentElement.clientTop;  // 非IE为0，IE为2  
document.documentElement.clientLeft; // 非IE为0，IE为2  
functiongGetRect (element) \{  
    var rect = element.getBoundingClientRect();  
    var top = document.documentElement.clientTop;  
    var left= document.documentElement.clientLeft;  
    return\{  
        top    :   rect.top - top,  
        bottom :   rect.bottom - top,  
        left   :   rect.left - left,  
        right  :   rect.right - left  
    \}  
\}  
分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。

2、react-native项目

项目引入js文件：

import \{Dimensions\} from 'react-native';  
const deviceWidthDp = Dimensions.get('window').width;  
const uiWidthPx = 360;//设计稿宽度  
/\*\*  
 \* @return \{number\}  
 \*/  
function D(uiElementPx) \{//uiElementPx测量尺寸，如div宽高和字体fontsize  
  return uiElementPx \* deviceWidthDp / uiWidthPx;  
\}  
export default D;

具体页面使用：

const Styles = StyleSheet.create(\{

header:\{width:D(50),height:D(20)\}

\});

3、react-native项目嵌套webview

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 2]: http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/