手机端h5页面自适应平板(iPad)js

雨点打透心脏的1/2处 2022-09-05 05:24 309阅读 0赞

手机页面h5自适应的方法有很多，比如：bootstrap，rem等等。下面分享给大家一个js控制viewPort视区自适应缩放的方法（我给它命名为phone.js）：

将phone.js引入在jq库之后:

![20210817142706493.png][]

下面是phone.js的详细代码:

var view_timer = null;
    function viewPort(userAgent, pageWidth) {
        var oView = document.getElementById('viewport');
        if (oView) {
            document.head.removeChild(oView);
        }
        if (!pageWidth) {
            pageWidth = 720;//手机页面设计图的宽度，宽度多少设置多少
        }
        var screen_w = parseInt(window.screen.width),
            scale = screen_w / pageWidth;
        if (/Android (\d+\.\d+)/.test(userAgent)) {
            var creat_meta = document.createElement('meta');
            creat_meta.name = 'viewport';
            creat_meta.id = 'viewport';
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
            } else {
                creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
            }
            document.head.appendChild(creat_meta);
        } else {
            var creat_meta = document.createElement('meta');
            creat_meta.name = 'viewport';
            creat_meta.id = 'viewport';
            if(window.orientation=='-90' || window.orientation == '90'){//判断移动设备横屏竖屏
                scale = window.screen.height / pageWidth;
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
            }
            else{
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
            }
            document.head.appendChild(creat_meta);
        }
    }
    viewPort(navigator.userAgent);
     
    window.onresize = function() {
        clearTimeout(view_timer);
        view_timer = setTimeout(function(){
            viewPort(navigator.userAgent);
        }, 500);
    }

引入成功后，就按照设计模块的实际像素（px）进行添加css样式布局就可以，不用再像rem一样，每次都要进行计算和转换了～～

[20210817142706493.png]: /images/20220829/30994d54245942418db9c4580ea7aa76.png

发表评论取消回复

表情：

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

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

相关阅读

相关 ReactNative H5 页面显示 react-native-webview 高度自适应

安装包 react-native-webview 简单示例 import React from 'react' import WebView fr

柔情只为你懂/ 2022年12月12日 04:51/ 0 赞/ 167 阅读

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 210 阅读

相关手机端h5页面自适应平板(iPad)js

手机页面h5自适应的方法有很多，比如：bootstrap，rem等等。下面分享给大家一个js控制viewPort视区自适应缩放的方法（我给它命名为phone.js）：将ph

雨点打透心脏的1/2处/ 2022年09月05日 05:24/ 0 赞/ 310 阅读

相关移动端（手机）自适应rem布局

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web a

淩亂°似流年/ 2022年07月16日 02:10/ 0 赞/ 227 阅读

相关 H5-WebApp 自适应方案 - rem

对于WepApp来说，为了更通用地满足各种机型的自适应布局要求，我们可以采用rem布局方案。 rem是相对于根元素（html）字体大小的单位，他只是一种相对单位。不

╰+哭是因爲堅強的太久メ/ 2022年07月12日 22:49/ 0 赞/ 179 阅读

相关利用rem实现h5自适应

利用rem实现h5自适应最近做h5比较多，从老大那里学到一招，超级实用。快速h5像素级切图，不用在费力地计算rem值啦。 [REM][] css中的[rem][

小鱼儿/ 2022年06月17日 05:44/ 0 赞/ 200 阅读

相关手机端H5页面时间插件

插件最终版图：![70][] 1.引入css和js样式‘； <link rel="stylesheet" type="text/css" href="../mo

小咪咪/ 2022年05月13日 06:42/ 0 赞/ 210 阅读

相关 rem自适应手机端布局

通过js根据屏幕设备尺寸的大小，改变根元素的值： <script> var html = document.querySelector("html"); v

比眉伴天荒/ 2022年01月07日 15:05/ 0 赞/ 283 阅读

相关 h5开发手机端项目如何自适应布局？em和rem的区别？

首先要让屏幕自适应大小代码如下： <meta name="viewport" content="width=device-width,initial-scale=1.

末蓝、/ 2021年11月17日 11:24/ 0 赞/ 468 阅读

相关手机上调试H5页面

1.在h5页面中引入js文件 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><

超、凢脫俗/ 2021年08月27日 19:50/ 0 赞/ 508 阅读