媒體查詢跨設備

我有3個媒體查詢我的網站上發生衝突，我遇到的問題是-webkit-分設備像素比一個iPhone是衝突的Android設備和屏幕不正確地解析在Android上，如果我把這個mq從網站上正確渲染，但在iPhone 4上它並沒有，並且工作在320像素寬度。媒體查詢跨設備

有一種方法可以得到僅iphone 4/4S設備看-webkit分鐘設備像素比：1.5媒體查詢？

下面是我的媒體查詢：

/*iphone4*/ 
      @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { 


      /*Main*/ 
      div#container { 
       width: 480px; 
      } 
    } 

/*Other mobile phones*/ 
     @media screen and (max-width: 767px) { 

      div#container {width: 480px;} 
     } 

/*Tablets*/ 
     @media only screen and (max-width: 1023px) and (min-width: 768px) { 
     div#container {width: 768px;} 

     }

來源

2012-07-31 davey

整個戰略需要進行審查。你的第一個媒體查詢也將瞄準iPad 3. – 2012-07-31 15:28:07

你能提出一個更好的策略嗎？謝謝 – davey 2012-07-31 15:30:25

爲什麼你不僅僅將寬度用於第一個規則而不是像素比。即如果最大寬度<480像素比容器寬度= 320px？這似乎與您的其他方法更爲一致。 – 2012-07-31 15:32:36

你覺得有多寬的iPhone 4（像素）和您怎麼看它的刻度值是什麼？閱讀你的規則，我覺得你想說「如果它是一個大手機，使這個480寬，如果它是一個更小的手機視網膜，使其480寬，否則，768」

但實際上，一個iPhone4的是320個像素寬，爲2的規模，所以你想使你的容器320像素寬，然後做一些與background-size:contain的圖像

但是，忽略了...這個頁面：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<title>Media2</title> 
<style> 
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;} 
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; } 
@media (max-width: 767px) { body {background-color:#0000FF;} } 
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} } 
@media (min-width: 768px) { body {background-color:#FF0000;} } 
</style> 
</head> 
<body> 
<div id="block"></div> 
</body> 
</html>

出現：

藍在iPod touch上
藍在Android Nexus S的
藍色的黑莓大膽
綠色在iPhone4的
紅iPad的

你可以去http://www.robotwoods.com/dev/misc/so_media2.html如果你有其他設備要測試。我張貼了關於媒體查詢這裏一點項：http://blog.robotwoods.com/2012/08/media-queries/但並沒有真正進入像素比率方面

來源

2012-08-02 02:09:53

感謝。我用480px寬，然後使用1.5的像素比率帶來640這是iPhone的視網膜顯示像素寬度。相反，從320px翻倍，當向上1.5px時，清晰度會更好。但是，當我在銀河注意到這個網站時，像素比率mq似乎干擾了android手機。你知道爲什麼會發生這種情況嗎？如果我拿出像素比例mq手機正確得到767px mq作爲屏幕像素寬度是900px。 – davey 2012-08-02 10:33:53

我想你可能會誤解像素比例。它就是這樣，它不適用於更改大小。 iphone4的寬度爲320像素，比例爲2，因此如果您提供640像素的圖像，它們將全部被使用。而且，因爲它不是「設置」，所以如果銀河注意比例爲1，那麼該媒體查詢將不會被應用，因爲它僅用於具有更高比率的設備，這是否合理？ – 2012-08-02 13:24:55

如果您提供640像素寬的圖像，它將會從屏幕上消失，除非您使用像素比例來「加倍」屏幕。星系筆記確實有1的比例，但由於某些原因，它使用像素比例mq，使圖像變得很小時，它應該使用767px媒體查詢。 – davey 2012-08-02 18:02:18

媒體查詢跨設備

回答

相關問題