三星Galaxy S3和S4的媒體查詢

我想用媒體查詢來顯示iPhone5，iPhone6，三星Galaxy SIII和三星Galaxy S4不同風格的文本框。對於iPhone 5和iPhone 6，我正在獲得理想的結果。現在，當我從iPhone切換到三星s3時，我獲得了正確的輸出，但是當我嘗試從S3切換到S4時，輸出錯誤。以下是我用於媒體查詢的樣式。也附加截圖。我在這裏沒有得到實際的問題。三星Galaxy S3和S4的媒體查詢

<style> 
@media only screen and (device-width:375px){ 
    .homeDOB{ 
     width:60% !important; 
     height:80px !important; 
     background-color: yellow; 
} } 

@media only screen and (device-width:320px) { 
    .homeDOB{ 
     width:60% !important; 
     height:80px !important; 
     background-color: black; 
} } 



@media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:2){ 
.homeDOB{ 
width:60% !important; 
     height:80px !important; 
     background-color: gray; 
} 
} 

@media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:3){ 
.homeDOB{ 
width:60% !important; 
     height:80px !important; 
     background-color: red; 
} 
} 



</style>

來源

2015-05-21 SouravM

您可以顯示正確和不正確的結果？ – NathanOliver

我想附上截圖，但我沒有太多的功勞添加圖片。實際上，正確的輸出應該具有60％的顯示寬度，但是當我從s3切換到s4或s4切換到s3時，高度和寬度都會增加，這是不可取的。 – SouravM

對於Galaxy S4，它的命中設備寬度有點超過400px。嘗試將您的媒體查詢更改爲：

@media screen and (max-width: 480px) { 
    .homeDOB { 
     width:60% !important; 
     height:80px !important; 
     background-color: black; 
    } 
}

並查看它是否可以在您的手機上使用。此外，這是視口必須使用：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

來源

2015-05-21 19:31:35

感謝它使用視口後工作。 – SouravM

三星galexy S3和S4設備寬度是640像素。試試這個

@media only screen and (max-width:640px){ 
    //your CSS rules 
}

在這裏你可以找到設備寬度/高度名單http://www.canbike.org/CSSpixels/

來源

2015-05-21 19:35:09

三星Galaxy S3和S4的媒體查詢

回答

相關問題