美文网首页
device-width和viewport

device-width和viewport

作者: Shiki_思清 | 来源:发表于2020-05-21 16:28 被阅读0次

在做移动端是,最大的需求就是要适配多端,当拿到UI 的设计稿时,上面的尺寸是这样的


11.jpg

width 和height都是固定的,而且字体大小也是成倍数固定的,比如font-size: 32px;

此时要做的就是适配,按比例动态缩放

<script>
  var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度 
  var deviceScale = deviceWidth / 750;  //得到当前设备屏幕与750之间的比例,之后我们就可以将网页宽度固定为750px 
  var ua = navigator.userAgent; 
//获取当前设备类型(安卓或苹果) 
  if (/Android (\d+.\d+)/.test(ua)) { 
    var version = parseFloat(RegExp.$1); 
    if (version > 2.3) { 
        document.write('<meta name="viewport" content="width=750,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-[图片上传中...(433.jpg-7f5c29-1590044775526-0)]
dpi">'); 
    } else { 
        document.write('<meta name="viewport" content="width=750,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />'); 
    } 
  } else { 
    document.write('<meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">'); 
  }
</script>

直接将代码引入,即可适配多端,而此时css中的width和height可以尽情的使用px


433.jpg

注意一下:代码中的750,就是第一张UI设计稿的width

此外,苹果的安全距离可以通过在meta中的content追加viewport-fit=cover,并在页脚的fixed按钮组的样式中的height改为对应带constant和env处理过的:

.footerButton { 
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: center;
    line-height: 3;
    padding: 32px 30px;
    background-color: #FFFFFF;
    // 此处开始重点
    height: 144px;
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

并且向上滑动时,页面的底部追加一段安全距离div:

.safebottom {
    height: 144px;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

注:设置 box-sizing: content-box; ,因为在通常情况下 css 在 reset 阶段一般都设置了 * {box-sizing: border-box;} 这样一来设置 padding 就不能向外扩展距离了,所以在这里我们要把他改回 content-box

相关文章

  • device-width和viewport

    在做移动端是,最大的需求就是要适配多端,当拿到UI 的设计稿时,上面的尺寸是这样的11.jpgwidth 和hei...

  • 移动端的事件

    移动端视窗

    防止iOS手机双击放大

    当写了这了

    h5网页设计标准

    以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下,...

  • meta 移动端禁止缩放

    width : viewport 的宽度,正整数/字符串 device-width height : vie...

  • 移动端开发注意事项

    一、关于meta (1)、常用的公共meta属性 1、viewport width=device-width 宽度...

  • meta

    模拟手机端网页 viewport ->视窗(展示区域) width=device-width设备宽度 视口 use...

  • Html5相关记录

    一、网页的宽度自适应屏幕 1.meta //完整的viewport设置 width=device-width:网页...

  • CSS中的”外围“尺寸

    一、device-width 表示”理想宽度“,也称为”ideal viewport“,是理想状态下外围容器宽度。...

  • 动态rem

    响应式 1.meta:vp阻止缩放 width=device-width记住viewport是视口user-sca...

网友评论

      本文标题:device-width和viewport

      本文链接:https://www.haomeiwen.com/subject/evgzohtx.html