简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 请教一下移动端开发，设计图与手机像素的问题。
巴扎黑
巴扎黑 2017-04-17 13:28:44
0
12
1057

我初学移动端开发，目前知道devicePixelRatio=物理像素 / 逻辑像素，还有就是CSS中1px的大小是并不固定的相对单位，是随着设备变化的。

有个问题请教大家：
iPhone5的devicePixelRatio是2，而且iP5横向物理像素是640，那么：
2 = 640（物理像素）/ x（逻辑像素），可以得出逻辑像素是320。2个物理像素，是1px（CSS的1px）。

有一张设计图宽度是640px，我想让显示到iP5上。
我用img标签引入图片，在CSS中设置 width:320px; height:266px;然后在head标签中加上:
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
F12，在chrome中模拟，结果出现横向滚动条，需要拖动才完整浏览，请问这是为什么？谢谢！

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>初始缩放</title>
<style>
*{margin: 0; padding: 0;}
p{width: 320px; height: 134px; 
}
</style>
</head>
<body>
    <p>
        <img src="640.jpg">
    </p>
</body>
</html>

截图：

巴扎黑
巴扎黑

全部回复(12)
刘奇
刘奇2017-04-17 13:30:44 12 楼

你把宽度定义在p上了，应该定义img的宽度

img {
  width: 320px;
}
点赞 +0
添加回复
大家讲道理
大家讲道理2017-04-17 13:30:44 11 楼

图片 设置width和height的一半

点赞 +0
添加回复
Peter_Zhu
Peter_Zhu2017-04-17 13:30:44 10 楼

有在手机上看过吗？
一般写width: 100%;就够了。高度会根据比例自动变化

点赞 +0
添加回复
洪涛
洪涛2017-04-17 13:30:44 9 楼

在Iphone这样的设备上，可以设置meta标签为这样，
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.5">
关于移动端的适配你可以看看这篇文章：
使用Flexible实现手淘H5页面的终端适配

点赞 +0
添加回复
巴扎黑
巴扎黑2017-04-17 13:30:44 8 楼 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>初始缩放</title>
    <style>
    *{margin: 0; padding: 0;}
    p{width: 320px; height: 134px; 
    p img{display:block;width:100%;height:auto}
    }
    </style>
    </head>
    <body>
        <p>
            <img src="640.jpg">
        </p>
    </body>
    </html>

您的页面倒是viewport了，但是图片不是还是640的么？需要预定义一下img；PS：如果页面是320的话，图片弄640的就没有用了；反正都是半像素显示的；

点赞 +0
添加回复
阿神
阿神2017-04-17 13:30:44 7 楼

你这个屏幕的宽度设置为320，也就是物理像素为320，转换为css像素也就是160px。而你的图片宽度切为了320px，也就是屏幕宽度的两倍，只要把图片宽度设为160px或者把屏幕宽度设为640即可。
建议看一下啃先生的【移动适配】系列文章，讲得很详细。

点赞 +0
添加回复
洪涛
洪涛2017-04-17 13:30:44 6 楼

图片宽度100%，可以解决很大一部分需求，对这个理解不够丫

点赞 +0
添加回复
迷茫
迷茫2017-04-17 13:30:44 5 楼

如果嫌麻烦的话直接@2x图就行了，放大一倍缩小一倍都不会有太大问题。如果要求严格的话最好是三套图。

点赞 +0
添加回复
阿神
阿神2017-04-17 13:30:44 4 楼

把宽高定在p上了。。

点赞 +0
添加回复
黄舟
黄舟2017-04-17 13:30:44 3 楼

设置一个 样式
.fullwidth{

width:100%;

}

想哪个宽度100% 就直接加上去就行了···上面的例子 应该加在图片上面

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！