javascript - 如何使我的网站与手机和平板电脑兼容？

Question

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

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

非常感谢

Answer 1

You are looking for Responsive web design! Start with MediaQueries http://mediaqueri.es/

Also check this out for better understanding

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

Answer 2

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

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

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

此后， Jquery Mobile是开发仅移动站点的一种非常好的方法。

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

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

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

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

Answer 3

您需要研究响应式设计。有许多免费的开源框架可以帮助您入门，其中最受欢迎的可能是bootstrap和Foundation。