js设置页面750适配

电玩女神 2023-02-17 02:38 21阅读 0赞

(function() { 
       if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { 
         var version = parseFloat(RegExp.$1);
         if (version > 2.3) { 
           var phoneScale = parseInt(window.screen.width) / 750;
           document.write(
             '<meta name="viewport" content="width=750, minimum-scale = ' +
               phoneScale +
               ", maximum-scale = " +
               phoneScale +
               ', user-scalable=no, target-densitydpi=device-dpi">'
           );
         } else { 
           document.write(
             '<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">'
           );
         }
       } else { 
         document.write(
           '<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">'
         );
       }
     })();

js 设置页面750适配，页面初始化的时候执行该代码，主页面设置

.homepage { 
      max-width: 750px;
      margin: 0 auto;
    }

最后页面的元素大小，按照px 处理即可，因为上面会自动改变viewport 进行缩放。

注意页面CSS先初始化：

<style>
    * { 
      margin: 0;
      padding: 0;
    
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
    }
    img { 
      vertical-align: top;
      text-size-adjust: 100%;
    }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关使用rem进行页面适配

想到写这个博客的时候，网上很多已经在吵着都2019了，还在用rem，都在用vw，emmm 1.rem的原理众所周知rem的原理就是，值根据html根元素的大小而定，改变h

拼搏现实的明天。/ 2023年08月17日 16:27/ 0 赞/ 131 阅读

相关 h5页面适配 iPhoneX

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

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

相关 js设置页面750适配

(function() { if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {

电玩女神/ 2023年02月17日 02:38/ 0 赞/ 22 阅读

相关最新rem适配H5 750设计稿代码

最新rem适配H5 750设计稿代码，比较严谨，项目中可直接使用，很简单方便 <script> //简单版 // functi

布满荆棘的人生/ 2022年11月20日 01:51/ 0 赞/ 183 阅读

相关页面适配的一点方法

高度百分比　　高度百分比方案——整个屏幕的主要高度都用百分比定位，比如介绍部分占高度的百分之30，点击抢红包部分占剩下的百分之70。　　优点——易于理解好上手

港控/mmm°/ 2022年09月30日 15:58/ 0 赞/ 147 阅读

相关 Android适配（屏幕适配、国际化适配）

首先来说一下Android的屏幕适配：　　关于Android屏幕的一些基本概念知识，自行充电。。在此只介绍实际开发过程中的使用　　1、说到Android的屏幕适配，

男娘i/ 2022年08月06日 09:16/ 0 赞/ 418 阅读

相关 pc端页面适配（个人理解）

目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。适配目标： 1.在不同分辨率的电脑上，网页可以正常显示 2.放大或者缩小屏幕

谁借莪１个温暖的怀抱￠/ 2022年03月28日 13:50/ 0 赞/ 339 阅读

相关手机端JS适配代码

手机端适配的通用代码，但要注意将640修改为设计稿的宽度，将从设计稿量得的mpx（m为量得长度），除以100后加上单位rem <meta name="viewport

绝地灬酷狼/ 2022年03月08日 03:04/ 0 赞/ 241 阅读

相关移动端 H5页面适配

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

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

相关安卓页面适配处理

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

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