H5 页面适配所有 iPhone 和安卓机型的六个技巧

痛定思痛。 2022-03-18 12:11 599阅读 0赞

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了。

REM布局

REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+ 都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。

REM与PX的换算可以查看网址： [https://offroadcode.com/prototypes/rem-calculator/][https_offroadcode.com_prototypes_rem-calculator]

假设，html我们设置font-size:12px; 也就是说12px相对于1rem，那么18px也就是 18/12 = 1.5rem。

那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。

1、如果仅仅是适配ip6+设备，那么使用media query就行。

代码如下：

/*320px布局*/
    html{font-size: 100px;}
    body{font-size: 0.14rem /*实际相当于14px*/}
     
    /* iphone 6 */
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
        html{font-size: 117.1875px;}
    }
    /* iphone6 plus */
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
        html{font-size: 129.375px;}
    }

这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。

2，如果是完全自适应，那么可以通过JS来控制。

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };
     
      // Abort if browser does not support addEventListener
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。

那么用REM做单位与百分比做单位有什么优势？

主要优势在于能更好的控制元素大小。（一般百分比应用在布局层，一般常见设置为50%，33.3%，25%之类的整数居多，难以运用在复杂的页面小部件内）。但是相比百分比布局，需要借助JS或media query实现，略有一点瑕疵。

[https_offroadcode.com_prototypes_rem-calculator]: https://offroadcode.com/prototypes/rem-calculator/

发表评论取消回复

表情：

评论列表（有 0 条评论，599人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5页面适配 iPhoneX

h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识，下面分享两篇网页适配 iPhoneX 的经典好文 [网页适配 iPhoneX，

比眉伴天荒/ 2023年06月05日 08:46/ 0 赞/ 127 阅读

相关移动端H5页面之iphone6的适配

iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站，以前写死body 为320px的，现在估计也忙着做适配了。大屏幕手机其实一直有，只是以前

深藏阁楼爱情的钟/ 2022年09月22日 12:58/ 0 赞/ 318 阅读

相关 Flexible实现H5页面的终端适配

设计师和前端开发的适配协作基本思路是：选择一种尺寸作为设计和开发基准定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出

浅浅的花香味﹌/ 2022年06月17日 02:23/ 0 赞/ 295 阅读

相关 H5页面适配所有iPhone和安卓机型的六个技巧

1、viewport 简单粗暴的方式： <meta name="viewport" content="width=320,maximum-scale=1.3,user

﹏ヽ暗。殇╰゛Y/ 2022年05月29日 03:59/ 0 赞/ 339 阅读

相关 H5 页面适配所有 iPhone 和安卓机型的六个技巧

1、viewport 简单粗暴的方式： <meta name="viewport" content="width=320,maximum-scale=1.3,user

痛定思痛。/ 2022年03月18日 12:11/ 0 赞/ 600 阅读

相关安卓全面屏适配方法

随着越来越多的全面屏手机的发布，尤其是千元机也上了所谓的全面屏，即18:9广义的全面屏，还有一些异形屏幕-刘海屏幕，我们也要加快适配，不然就出现拉伸变形的启动图怪像。适配

川长思鸟来/ 2021年09月26日 14:54/ 0 赞/ 522 阅读

相关移动端h5适配不同高度的机型，巨坑！！！

最近给公司做一个活动页面，遇到了一个没有遇到过的问题。我写了一个页面，在页面的最下面，有一个动态按钮，点击可以向下滑动，如下图 ![在这里插入图片描述][202005

女爷i/ 2021年09月24日 08:02/ 0 赞/ 573 阅读

相关 h5适配

> H5页面开发适配方案，平时的一些小总结，希望能帮助到大家。博客维护在git上，欢迎给一个star!!! https://github.com/mtonhuang/blo

- 日理万妓/ 2021年09月19日 23:50/ 0 赞/ 568 阅读

相关移动端 H5页面适配

![这里写图片描述][1] 一、基础概念 -------------------- 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr

谁借莪１个温暖的怀抱￠/ 2021年09月18日 09:04/ 0 赞/ 809 阅读

相关安卓页面适配处理

宽度适配首先将头条的代码封装到BaseActivity 声明一个抽象函数 private abstract initview(); 抽象函数是没有函数体的 ![

我会带着你远行/ 2021年08月31日 09:24/ 0 赞/ 539 阅读