創建正確的媒體查詢斷點以覆蓋移動設備和平板電腦

Question

基本上，我構建的網站需要2個媒體查詢，其中1個將覆蓋移動設備，另一個將覆蓋平板電腦。這是要求。

我有這個問題是移動的最大寬度將不得不是640px，以涵蓋三星Galaxy S3，但對於平板電腦的Nexus 7最大寬度的肖像是599，所以我冒着我的手機落入平板電腦查詢

任何人都可以建議我怎麼能得到這個？

Answer 1

您可以應用此設置。它運作良好（至少對我來說）：

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Answer 2

我有一個非常類似的問題。我已經嘗試了所有可能的媒體查詢。爲了區分平板電腦和手機，您必須使用物理尺寸使用max-device-width媒體查詢，而不是使用像素寬度的媒體查詢。

這裏是用來定位在橫向片我的CSS的摘錄，請大家看看max-device-width：

@media screen and (max-device-width: 1280px) and (orientation: portrait), 
screen and (max-device-width: 23cm) and (orientation: landscape), 
screen and (orientation: landscape) and (max-device-width: 1280px) and (max-device-height: 1000px) 

我用iPad上（非視網膜）這個查詢，iPad 2的（視網膜）和華碩Transformer平板電腦。在cm中指定大小工作得很好，英寸in在某些平板電腦上無法工作（目前無法記起哪些）。

參考max-device-width媒體查詢的官方說明：http://www.w3.org/TR/css3-mediaqueries/#device-width

Answer 3

看到了手機和平板電腦： 如果您在測試頁運行它，你可以找到實際設備上正確的尺寸。

https://jsfiddle.net/t2bybrdu/

HTML：

<div class="body-test"> 
     <div class="center green-btn">Browser size tester:</div> 
     </br> 
     </br> 
     <div class="result"></div> 
</div> 

JS：

$(".body-test .center").click(function(){ 
    var browser_size = $(window).width(); 
    console.log(browser_size + 20); 
    console.log("viewport size: " + Number(20 + browser_size)); 
    $(".body-test .result").text("Your viewport size is: " + Number(browser_size + 20) + "px");  
}); 

CSS：

.green-btn { 
    display: block; 
    background: green; 
    color: white; 
    padding: 10px 20px; 
    font-size: 18px; 
    font-weight: bold; 
    border-radius: 4px; 
    width: 180px; 
} 
.body-test { 
    padding-top: 120px; 

} 
.body-test .result { 
    text-align: center; 
    font-weight: bold; 
    padding: 3em auto; 
} 

.body-test .center { 
    position: relative; 
    left: calc(50% - 100px); 
    cursor: pointer; 
}