用于媒体查询的平板电脑的最大宽度是多少？

Posted 2023-03-06

【中文标题】用于媒体查询的平板电脑的最大宽度是多少？

【英文标题】：What will be the maximum width of tablet to use in media query?

【发布时间】：2014-12-12 17:35:09

【问题描述】：

我对媒体查询进行了一些研究，但我对获得平板电脑的宽度感到很困惑。

我发现的一些例子：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

但是，如今平板电脑的尺寸各不相同。有的平板看起来很大，怎么才能找到平板的最大宽度呢？

到目前为止，我使用如下..

# Tablet
    only screen and (min-width: 768px) and (max-width: 979px)

我需要知道平板电脑的最大宽度来修复我的响应式设计。 我可以为平板电脑使用 786 像素的最小宽度吗？ 我要的是所有品牌的平板设备（三星、ipad、Google Nexus 系列）

【问题讨论】：

尝试使用@media screen and (min-width: 768px) and (max-width: 1024px)，因为横向屏幕尺寸将是1024px，它也可能适合普通桌面屏幕！！

您的方法应该基于设计而不是基于设备。从设计的角度来看，768 像素宽的设备是窄桌面还是平板电脑真的很重要吗？

那么，你的结论是什么？

【参考方案1】：

今天也有平板手机，像素密度可以是任何东西（你可以在 4 英寸手机上拥有全高清），所以我建议不要针对平板电脑，而是使用具有最小宽度的相关设备。

根据 Quirksmode 的旧测量 http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) 

但是，我猜这对于较新的平板电脑效果不佳，因为我的手机有 37em 或更多。

因此，我建议使用

@media screen and (min-width: 42em) 

除非有人找到更好的方法。

【参考方案2】：

我目前正在使用什么。

   /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) 
    /* Styles */
    

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) 
    /* Styles */
    

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) 
    /* Styles */
    

    /* Tablet (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    /* Styles */
    

    /* Tablet (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) 
    /* Styles */
    

    /* Tablet (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) 
    /* Styles */
    

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) 
    /* Styles */
    

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) 
    /* Styles */
    

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) 
    /* Styles */
    

【讨论】：

那么对于平板电脑 min-width - 767px 和 max-width - 979px 对吧？

这个最大宽度 979px 是否适用于横向模式？

@DineshKumar 我看过一个过去的项目，我已经编辑了我的答案。现在您已经列出了纵向和横向尺寸。我希望它有所帮助:-)

@DineshKumar 很高兴为您提供帮助！ :-)