详解挪动端h5网页页面依据显示屏兼容的4种计划

日期:2021-01-19 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

方式1:引进淘宝开源系统的可伸缩合理布局计划方案

引进淘宝开源系统的可伸缩合理布局计划方案:https://github.com/amfe/lib-flexible(此处可点一下)

淘宝的实际上也和viewport的有点像,可是它关键是依据机器设备机器设备像素比设定scale的值,维持视口device-width自始至终等于机器设备物理学像素,显示屏尺寸动态性测算根字体样式尺寸,实际是将显示屏区划为10等分。这块还可以立即用js完成,后边会提到

实际引进和应用方式,移步github查询,十分详尽。

方式2:viewport 的应用

github里面,有提到  viewport 的应用。我觉得这篇文章内容有关viewport 的详细介绍非常详尽,包含占比、是不是放缩等的特性详细介绍非常的详尽,尽管文章内容的內容1大片的字看起来许多,可是请细心看完,全是干货能很好的让你了解viewport。假如较为心急,请再次往下看总结图吧

https://www.jb51.net/article/149140.htm(此处可点一下)

有关 viewport 的,这块立即引入上面文章内容的內容,我觉得也是最果断最立即的总结了吧

方式3:应用js+viewport动态性设定手动式兼容rem

我的编写器是vscode,加上了软件cssrem全自动变换

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf⑻">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- 开启360访问器的极速方式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 防止IE应用适配方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 对于手持机器设备提升,关键是对于1些老的不鉴别viewport的访问器,例如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的旧式访问器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制性竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制性竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制性全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制性全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC运用方式 -->
    <meta name="browsermode" content="application">
    <!-- QQ运用方式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点一下无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="telephone=no" name="format-detection" />
    <meta name="huaban" content="nopin" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <title>新茶饮</title>
    <script src="/config.js"></script>
   <script src="http://res.wx.qq.com/open/js/jweixin⑴.0.0.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- 
    在iphone 5 中1rem=16px; 
    html font-size =16px=1rem;
  -->
  <script>
    //获得手机上显示屏的宽度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    console.log('htmlWidth',htmlWidth)
    //获得html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    // if(htmlWidth>640){//超出640尺寸的,字体样式根部全是16px
    //   htmlWidth=640;
    //   console.log('htmlWidth-true',htmlWidth)
    // }
    //设定根元素字体样式尺寸
    htmlDom.style.fontSize = htmlWidth / 40 + 'px';

  </script>
    
  </body>
</html>

方式4:依据css的新闻媒体查寻动态性设定根部html字体样式尺寸

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

到此这篇有关详解挪动端h5网页页面依据显示屏兼容的4种计划方案的文章内容就详细介绍到这了,更多有关h5挪动端依据显示屏兼容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!