css - 大尺寸手机的响应式设计

Question

我正在使用媒体查询设计一个网站，并且在桌面和我的 iPad 上看起来一切都很好......但我的手机是另一回事。像素尺寸为 1024x768，因为它是一款较新的智能手机，所以它试图像我的平板电脑一样显示它。我如何使用媒体查询来指定我的 1024x768 手机的显示方式应与我的 iPad 不同？感谢您的帮助。

这是我一开始所做的工作:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

Answer 1

初步想法

关于您手机上的确切布局问题的一些额外信息会有所帮助。另外，请确保您使用的是正确的 <meta>标签(如@Lokase 建议的那样)。可以找到一个很好的记录here .

两种可能的解决方案

1. 使用 min-height和 max-height结合 width您已经在尝试定位的媒体查询您的手机。

2. 如果这不是一个选项，您可以使用 javascript 来定位您的通过尝试检测用户代理来打电话，但这可以被击中或小姐。

一句警告

综上所述，尝试针对特定视口(viewport)进行设计会导致无尽的挫败感。时间更密集，您可能需要退后一步并重新考虑您的布局，以及您如何使用媒体查询。实现起来可能会很痛苦，但从长远来看，您会感谢自己。想想现在市场上有多少高分辨率 Android 手机，以及有多少即将上市。