不同设备上的相同网站？

Posted 2023-02-24

【中文标题】不同设备上的相同网站？

【英文标题】：Same website on different devices?

【发布时间】：2013-09-16 16:34:01

【问题描述】：

我正在开发一个试图做出响应的网站。

到目前为止，它适用于台式机和手机（iphone，galaxy s4..ect）

当它在平板电脑（ipad、nexus 7 ..）上看起来像在手机上时，我很难尝试制作该网站。

我的网站在这里 - http://mk18.web44.net/index2.php

您可以使用http://quirktools.com/screenfly/ 来了解我的意思。将设置更改为iphone之类的手机。这就是我希望它在 ipad 上的样子。

你可以翻看css - http://mk18.web44.net/css/styles.css

谢谢

【参考方案1】：

就我所见，在我看来，你的努力有点过头了。

为了让它像 iphone 一样，您必须使用与 @media(max-width: 360px) 相同的指令进行 @media(max-width: 768px) 的媒体查询。

如果这是您想要的，我的建议是完全删除 @media(max-width: 360px) 并留下 @media(max-width: 768px) - 其中的 css 指令仅适用于宽度小于 768 像素的设备（包括 iphone 和其他手机） )。

另外，你应该做一些清理工作。 Css 代码将从上到下解析，因此没有任何媒体查询（@media 位）的 css 指令将始终应用于所有设备，直到有覆盖。可以根据需要创建尽可能多的@media 查询，但这并不意味着您应该这样做。

有了正确的 css 基础，您可以在没有媒体查询的情况下适应大多数设备，仅使用它们来重新组织内容和用户界面，使其保持可用。

希望对你有帮助。

【讨论】：

感谢工作。我理解你关于清理 css 的意思。在这个时刻，我只是想让一切正常。