简体繁体 English

媒体查询的最大宽度无法正常运行

[英]Media-query max-width not functioning properly

原文 2017-05-27 09:51:22 4 1 html/ css/ responsive-design

Good day everybody! 大家好！ I am currently working on a web app, and I am using media-queries, in aims to support mobile and desktop. 我目前正在开发一个Web应用程序，并且正在使用媒体查询，旨在支持移动设备和台式机。

I have tried to use max-width: 414px as my first break-point, to work on the current iPhones and other phones with smaller screen sizes. 我尝试使用max-width: 414px作为我的第一个断点，以在当前iPhone和其他具有较小屏幕尺寸的手机上工作。 However, even after rereading various forum posts, responsive web design tutorials, and web documentations, to no luck, it wouldn't work the way I need it to. 但是，即使重新阅读了各种论坛帖子，响应式Web设计教程和Web文档，也没有运气，但是它并不能按我需要的方式工作。

See here that whenever I use max-width , even on screen sizes of 414px, or lower (I have tried), it really wouldn't work. 看到这里，每当我使用max-width ，即使在414px或更小的屏幕尺寸（我已经尝试过）上，它也实际上不起作用。 The styles wouldn't apply. 样式将不适用。

Now, when I would use, min-width , it does work, however, I've read it's better RWD practice to use max-width for better functionality. 现在，当我使用min-width ，它确实可以工作，但是，我读到最好使用RWD做法来使用max-width以获得更好的功能。

What are your suggestions? 您有什么建议？ Thank you! 谢谢！

1 个解决方案

So I think your problem is that you are in zoom mode (like 2x or 3x). 所以我认为您的问题是您处于缩放模式（例如2倍或3倍）。 If you are in Safari responsive mode, please remember to go to use View > Actual Size , make sure it's not zoomed in in any way, as this will surely affect the media query used. 如果您处于Safari响应模式，请记住使用“ View > Actual Size ，确保它没有以任何方式放大，因为这肯定会影响所使用的媒体查询。 Have a good day! 祝你有美好的一天！