iPad和其他平板設備的媒體查詢

Question

我正在嘗試編寫媒體查詢，以使網站在iPad中看起來正確。

我已將所有設備的css文件都設置爲mobile.css。在mobile.css下，我正在做一些改變。

下面是CSS代碼片段。

@media screen and (max-width: 1024px) { 


.tobeaddedtobutton { 
    background-color: transparent; 
    width: 100%; 
    height: 35px; 
    border-radius: 0px; 
    background-image: url("../assets/tablet/btn-border-yellow.png"); 
    background-repeat: no-repeat; 
    text-align: left; 
    font-family: Signika; 
    color: white; 
    border: none; 
    font-size: 13px; 
    } 

    .tobeaddedtobutton-1 { 
    background-color: transparent; 
    width: 100%; 
    height: 35px; 
    border-radius: 0px; 
    background-image: url("../assets/tablet/btn-border-orange.png"); 
    background-repeat: no-repeat; 
    text-align: left; 
    font-family: Signika; 
    color: white; 
    border: none; 
    font-size: 13px; 
    } 
    } 

簡單地說，我試圖在設備是iPad時向按鈕添加不同的邊框圖像。但是，當我在此媒體查詢下更改路徑時，brower正在爲所有設備讀取此代碼，這是不正確的。

我在做對吧？

請建議。

Answer 1

這些是我使用的媒體查詢。我使用Google Chrome工具在移動設備屏幕尺寸之間切換。

我注意到，即使谷歌Chrome瀏覽器的工具看起來很正確，很多時候我必須破解媒體查詢才能在實際設備上正常工作。不幸的是，你永遠不知道，直到你可以在實際的設備上測試。

爲了給你很多不同的工作媒體查詢的例子，我從我之前工作過的一個網站中將我的樣式留在他們中。

讓我知道你是否需要我澄清任何事情！

/* Iphone 4 */ 
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
{ 
    .newsletterDownload a { 
     padding-left: 25px; 
    } 
} 

/* Iphone 5 */ 
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 568px) 
{ 
    .newsletterDownload a { 
     padding-left: 25px; 
    } 
} 

/* Iphone 6 */ 
@media screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) { 
    .newsletterDownload a { 
     padding-left: 50px; 
    } 
} 

/* Iphone 6 plus */ 
@media screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
{ 
    .newsletterDownload a { 
     padding-left: 80px; 
    } 
} 

/* I Pad Portrait */ 
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
{ 
.newsletterDownload a { 
    padding-left: 20px; 
} 
.hours { 
    padding-left: 0px; 
} 
} 

/* I Pad Landscape */ 
@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
.newsletterDownload a { 
    padding-left: 80px; 
} 
} 

/* Blackberry Play Book*/ 
@media screen 
and (min-device-width : 600px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
.newsletterDownload a { 
    padding-left: 50px; 
} 
.hours { 
    padding-left: 16px; 
} 
} 

/* Blackberry Z30 */ 
@media screen 
and (min-device-width: 360px) 
and (max-device-width: 640px) 
{ 
    .newsletterDownload a { 
     padding-left: 47px; 
    } 
} 

/* Nexus 6 */ 
@media screen 
and (min-device-width: 412px) 
and (max-device-width: 732px) 
{ 
    .newsletterDownload a { 
     padding-left: 78px; 
    } 
} 

/* Nexus 7 */ 
@media screen 
and (min-device-width: 600px) 
and (max-device-width: 960px) 
and (orientation : portrait) 
{ 
    .newsletterDownload a { 
     padding-left: 37px; 
     font-size: 1em; 
    } 
} 

/* Nexus 7 */ 
@media screen 
and (min-device-width: 600px) 
and (max-device-width: 960px) 
and (orientation : landscape) 
{ 
    .newsletterDownload a { 
     padding-left:85px; 
     font-size: 1em; 
    } 
} 

而這裏是iPhone的背景圖像。請記住，您必須確保爲每個尺寸的屏幕和風景與縱向視圖獲取所有Iphone查詢。

/* Iphone 6 plus */ 
    @media screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    { 
     .MyClass { 
      background-image: url('filePathTo/image.png') repeat-x; 
     } 
    } 

Answer 2

我認爲有一個特定的媒體查詢屏幕像素比率（dpi）的這樣你可以檢測視網膜設備（例如iPhone的/片劑），其中可以添加一個簡單的最小寬度和你去.. 。平板電腦查詢。

例子：

 


    @media only screen and (min-width: 320px) { 

     /* Small screen, non-retina */ 

    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2)  and (min-width: 320px), 
    only screen and ( min--moz-device-pixel-ratio: 2)  and (min-width: 320px), 
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), 
    only screen and (  min-device-pixel-ratio: 2)  and (min-width: 320px), 
    only screen and (    min-resolution: 192dpi) and (min-width: 320px), 
    only screen and (    min-resolution: 2dppx) and (min-width: 320px) { 

     /* Small screen, retina, stuff to override above media query */ 

    } 

    @media only screen and (min-width: 700px) { 

     /* Medium screen, non-retina */ 

    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2)  and (min-width: 700px), 
    only screen and ( min--moz-device-pixel-ratio: 2)  and (min-width: 700px), 
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), 
    only screen and (  min-device-pixel-ratio: 2)  and (min-width: 700px), 
    only screen and (    min-resolution: 192dpi) and (min-width: 700px), 
    only screen and (    min-resolution: 2dppx) and (min-width: 700px) { 

     /* Medium screen, retina, stuff to override above media query */ 

    } 

    @media only screen and (min-width: 1300px) { 

     /* Large screen, non-retina */ 

    } 

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2)  and (min-width: 1300px), 
    only screen and ( min--moz-device-pixel-ratio: 2)  and (min-width: 1300px), 
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), 
    only screen and (  min-device-pixel-ratio: 2)  and (min-width: 1300px), 
    only screen and (    min-resolution: 192dpi) and (min-width: 1300px), 
    only screen and (    min-resolution: 2dppx) and (min-width: 1300px) { 

     /* Large screen, retina, stuff to override above media query */ 

    }