0

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

这是我一直在努力的开始：

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

1 回答 1

1

最初的想法

有关手机上确切布局问题的一些附加信息会有所帮助。另外，请确保您使用了正确的<meta>标签（如@Lokase 建议的那样）。可以在这里找到一个很好的失败。

两种可能的解决方案

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

  2. 如果这不是一个选项，您可以使用 javascript 通过尝试检测用户代理来定位您的手机，但这可能会被击中或错过。

一句警告

尽管如此， 尝试为特定视口进行设计将导致无穷无尽的挫败感。您可能需要更费时地退后一步，重新考虑您的布局，以及您如何使用媒体查询。这可能很难实现，但从长远来看，你会感谢自己。只需考虑现在市场上高分辨率安卓手机的数量，以及即将发货的数量。

于 2013-02-21T15:11:09.673 回答