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

我初学移动端开发，目前知道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學習者快速成長！