我正在使用媒体查询设计一个网站，并且在桌面和我的 iPad 上看起来一切都很好......但我的手机是另一回事。像素尺寸为 1024x768，因为它是一款较新的智能手机，所以它试图像我的平板电脑一样显示它。我如何使用媒体查询来指定我的 1024x768 手机的显示方式应与我的 iPad 不同？感谢您的帮助。
这是我一开始所做的工作:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
最佳答案
初步想法
关于您手机上的确切布局问题的一些额外信息会有所帮助。另外，请确保您使用的是正确的 <meta>标签(如@Lokase 建议的那样)。可以找到一个很好的记录here .
两种可能的解决方案
使用
min-height和max-height结合width您已经在尝试定位的媒体查询 您的手机。如果这不是一个选项，您可以使用 javascript 来定位您的 通过尝试检测用户代理来打电话，但这可以被击中或 小姐。
一句警告
综上所述，尝试针对特定视口(viewport)进行设计会导致无尽的挫败感。时间更密集，您可能需要退后一步并重新考虑您的布局，以及您如何使用媒体查询。实现起来可能会很痛苦，但从长远来看，您会感谢自己。想想现在市场上有多少高分辨率 Android 手机，以及有多少即将上市。
关于css - 大尺寸手机的响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15004898/