iPad和其他平板设备的媒体查询

Question

我正在尝试编写媒体查询以使网站在 iPad 中看起来合适。

我将所有设备 css 文件都保存为 mobile.css。在 mobile.css 下面是我如何进行一些更改。

下面是 CSS 代码 sn-p。

@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 时，我只是尝试向按钮添加不同的边框图像。但是当我在此媒体查询下更改路径时，浏览器正在为所有设备读取此代码，这是不正确的。

我做得对吗？

请提出建议。

Answer 1

这些是我使用的媒体查询。我使用 Google Chrome 工具在移动设备屏幕尺寸之间切换。

我注意到，尽管 Google 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/平板电脑），您可以在其中添加一个简单的最小宽度，然后就可以了... Tablet-Query .

例子：

@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 */ }