Question

我正在一个有一些媒体查询的模板上建立一个网站。只有最低的最大宽度是479，如果我正确的话，这不适用于iPhone（如果是的话，它不起作用）。

我无法通过调整浏览器的大小来模拟iPhone的屏幕，因此很难测试，因为我要测试的唯一的iPhone在很多时候都在使用。

看看另一个支持iPhone的模板，我从那里获取了媒体查询，但它没有用。

我添加的代码：

@media (max-width: 359px) {
    .smaller{
        font-size: 10px;    
    }
}

这应该可行吗？

有人知道正确的媒体查询吗？也许可以在不使用iPhone的情况下测试iPhone响应版本吗？

谢谢！

Answer 1

媒体查询中的问题在＆＃34; max-width＆＃34;中，它指的是目标显示区域。

你应该使用＆＃34; min-device-width＆＃34; /＆＃34; max-device-width＆＃34;相反，它指的是设备的渲染区域。

关于在不使用实际设备的情况下测试iPhone特定样式 - 以下是一些基于浏览器的示例，您可能需要查看：

Google Chrome开发人员工具设备模式（https://developer.chrome.com/devtools/docs/device-mode）
Firefox响应式设计视图（https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View）

Answer 2

有很多方法可以做到这一点。以下链接将帮助您编写iPhone的媒体查询。

http://stephen.io/mediaqueries/

iPhone 5 Media Queries

iPhone 5 in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 in landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 in portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Media Query无法用于iPhone

2 个答案: