移动端不同分辨率手机的适配问题

最新推荐文章于 2023-10-18 09:25:24 发布

azhenplus

最新推荐文章于 2023-10-18 09:25:24 发布

阅读量2.5k

点赞数 1

分类专栏： js基础文章标签：移动端适配

本文链接：https://blog.csdn.net/azhenplus/article/details/52798888

版权

移动端H5页面适配各种手机分辨率是个挑战。本文介绍了两种方法：1) 固定宽度并依赖内容缩放，适用于非Retina屏幕；2) 使用rem和flexible.js，通过调整基准font-size实现灵活适配，提高高清屏幕的显示效果。

摘要由CSDN通过智能技术生成

移动端的适配真是一件让人头疼的事情，本小白一直在摸索前进，因为最近在做移动端的H5页面，为了响应领导的号召，尽量适配各种手机，抓狂一段时间后，参考前辈经验，总结出以下3套方案。

一：固定宽度，让显示内容根据设备的大小缩放，不考虑苹果设备的高清显示。

代码如下：

<span style="font-family:Times New Roman;font-size:18px;">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">');
    
}</span>

这是比较常见的一种做法，简单粗暴，最大的好处就是设置元素大小的时候可以直接根据设计稿的大小