移动端rem布局与高清屏幕适配

最新推荐文章于 2024-01-30 22:59:15 发布

weixin_34309543

最新推荐文章于 2024-01-30 22:59:15 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b86a76cf265da43623c384e

博客介绍了移动端视口在未设置时为980，提及逻辑像素和物理像素，还阐述了meta标签的相关内容，给出移动端1px解决方案，同时说明flexible.js会自行生成meta标签，无需手动编写。

移动端视口在没设置情况下是980

document.documentElement.clientWidth
window.screen
复制代码

逻辑像素和物理像素

拿iphone4为例，横向逻辑像素为320个，横向物理像素有640个，所以window.devicePixelRatio = 2, 就是2倍屏
复制代码

meta标签

  <meta name="viewport" content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0, user-scalable=no">
复制代码

移动端1px 解决方案

.radius-border{
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}
复制代码