大型手机的响应式设计

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来定位您的 手机通过尝试检测用户代理，但这可以被击中或 未命中。

警告

所有这些都说试图为特定视口设计将导致无尽的挫折。您可能需要更加耗时，重新考虑布局，以及如何使用媒体查询。这可能很难实现，但从长远来看，你会感谢自己。现在考虑一下市场上高分辨率Android手机的数量，以及即将发货的手机数量。