二倍图（物理像素&物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）

最新推荐文章于 2023-04-04 19:47:44 发布

程序员shy

最新推荐文章于 2023-04-04 19:47:44 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：《移动端布局》第二站文章标签：移动端布局

本文链接：https://blog.youkuaiyun.com/Junyi727/article/details/124603364

《移动端布局》第二站专栏收录该内容

15 篇文章

订阅专栏

本文介绍了物理像素和物理像素比的概念，特别是在视网膜屏幕上的应用。针对高清设备，文章讨论了如何使用多倍图和不同的背景缩放方式（如cover和contain）来提升图片质量。同时，探讨了移动端开发的选择，包括响应式设计和移动端技术解决方案，以及移动端浏览器的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二倍图

物理像素&物理像素比

物理像素指的是屏幕显示的最小颗粒，是物理真实存在的，我们开发的1px不一定等于1个物理像素，（PC端相同，移动端不一定相同）

PC端和早期手机屏幕是 1CSS像素 = 1物理像素的，后来推出了一个视网膜屏幕，可以把更多的物理像素点压缩进一块屏幕里，从而达到更高分辨率，提升屏幕显示的细腻程度

1个px所能显示的物理像素点的个数，称为物理像素比（屏幕像素比）

多倍图

对于一张图片，在手机视网膜屏打开，按照物理像素比放大倍数，会导致图片模糊，在标准的viewport设置中，我们通常使用倍图来提高图片质量，解决高清设备中模糊的情况

背景缩放

background-size: 背景图片宽度 背景图片高度;

单位：长度、百分比、cover、contain

cover是将图片等比例拉伸填满盒子，会有部分超出

contain是将图片等比例拉伸到不超出盒子的最大尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            background-size: 500px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            /* background-size: 500px; */
            background-size: 500px 500px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            /* background-size: 500px; */
            /* background-size: 500px 500px; */
            background-size: 100%;
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            /* background-size: 500px; */
            /* background-size: 500px 500px; */
            /* background-size: 100%; */
            background-size: 100% 100%;
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scaleable=no">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(梦想.jpg) no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

移动端开发选择

移动端主流方案

单独制作移动端页面（主流）

通过判断设备，跳转PC端或移动端页面，通常移动端页面为网址域名前面加m

响应式页面兼容移动端（其次）

通过屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花精力去调兼容性问题

移动端技术解决方案

移动端浏览器

移动端浏览器基本以webkit内核为主，只需要考虑webkit兼容性问题，可以放心使用H5标签和C3样式，同时浏览器的私有前缀只需要考虑webkit即可

特殊样式

/*点击高亮我们需要清除清除设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#">你好</a>
    <input type="button" value="嘿嘿">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img,a { 
            /*禁用长按页面时的弹出菜单*/
            -webkit-touch-callout: none; 
        }
        a {
            /*点击高亮我们需要清除清除设置为transparent完成透明*/
            -webkit-tap-highlight-color: transparent;
        }
        input {
            /*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <a href="#">你好</a>
    <input type="button" value="嘿嘿">
</body>
</html>