如何使我的网站与手机和平板电脑兼容？ [关闭]

Posted 2023-03-31

【中文标题】如何使我的网站与手机和平板电脑兼容？ [关闭]

【英文标题】：How to make my website mobile and tablet compatible? [closed]

【发布时间】：2013-01-28 16:44:58

【问题描述】：

我想让我现有的网站在在手机、平板电脑上查看时自动调整，甚至当您在桌面上调整屏幕时。

如果做不到，如果太难了，你有什么建议？？我基本上想要一个使用相同 url 的 ipad 和 iphone (android) 版本，并在检测到移动浏览器时自动定向。

非常感谢

【参考方案1】：

您正在寻找响应式网页设计！从 MediaQueries 开始http://mediaqueri.es/

也可以看看这个以更好地理解

http://www.slideshare.net/zomigi/building-responsive-layouts-15508821

【参考方案2】：

除了其他人的回答之外，对于移动网站，您有两个基本选择。

您可以拥有不同的桌面和移动网站，或者一个可在所有设备上运行的响应式网站。

对于第一个选项，您可以将移动用户重定向到一个完全不同的 URL，您可以在该 URL 中托管仅移动版本的网站。为此，您可以使用 http://detectmobilebrowsers.mobi/ 之类的东西来管理重定向，或者使用 .htaccess 文件进行重定向有很多变体。

Jquery Mobile 是在此之后开发仅限移动网站的一种非常好的方法。

这种方法的优点是可以更轻松地开发您的网站的轻量级纯移动版本。一个缺点是您需要维护两个网站——桌面和移动。

另一种选择是其他人建议的响应式方法。在这里，您基本上拥有一个站点，该站点根据访问者浏览器的寡妇大小进行重新配置。 Bootstrap 和 Foundation 是两个很好的选择，还有很多其他选择。

响应式网站依靠媒体查询来确定窗口大小。这在现代浏览器中得到了很好的支持，但旧浏览器可能会出现一些问题，您可能需要解决这些问题。响应式站点的一些优点是您只维护一个站点，并且理论上它适用于所有屏幕和窗口大小，因此在发布具有不同屏幕大小的下一个移动设备时不会引起问题。

祝你好运，现在是从事网页设计的有趣时期。

【参考方案3】：

您需要查看responsive design。有许多免费的开源框架可以帮助您入门，其中最受欢迎的可能是 bootstrap 和 foundation。