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

雨点打透心脏的1/2处 2022-09-05 05:24 353阅读 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 条评论，353人围观）

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

相关阅读

相关 h5手机端微信自定义分享

一、绑定域名首先要确保微信公众号后台的域名和自己代码里分享链接的域名要保持一致二、引入微信端js文件 <script src="http://

梦里梦外;/ 2023年06月08日 03:24/ 0 赞/ 6 阅读

相关手机端web端页面自适应布局，一段代码解决方案

如果是手机端页面采用rem的方式布局。rem相对于HTML根元素的一个相对单位。我们可以根据浏览器的宽度确定他是web端还是移动端。如果是移动端的话就给根元素一个fonts

今天药忘吃喽~/ 2023年06月04日 06:53/ 0 赞/ 3 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 rem自适应手机端布局

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

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

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

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

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

相关手机上调试H5页面

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

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