Javascript 如何使我的网站兼容手机和平板电脑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14566848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make my website mobile and tablet compatible?
提问by Darron Donaldson
I want to make my existing website automatically adjust itself when viewed either on mobiles, tablets, or even when you adjust your screen on a desktop.
我想让我现有的网站在手机、平板电脑上查看时自动调整，甚至当您在台式机上调整屏幕时。
Failing that, if it's too difficult, what suggestions do you have?? I basically want an ipad and iphone (android) version that uses the same url, with an auto direct when mobile browsers are detected.
失败了，如果太难了，你有什么建议？？我基本上想要一个使用相同 url 的 ipad 和 iphone (android) 版本，并在检测到移动浏览器时自动定向。
Many thanks
非常感谢
回答by Anbu
You are looking for Responsive web design! Start with MediaQueries http://mediaqueri.es/
您正在寻找响应式网页设计！从 MediaQueries http://mediaqueri.es/开始
Also check this out for better understanding
也检查一下这个以更好地理解
http://www.slideshare.net/zomigi/building-responsive-layouts-15508821
http://www.slideshare.net/zomigi/building-responsive-layouts-15508821
回答by David Taiaroa
Adding to what others have answered, for mobile sites you have two basic options.
除了其他人的回答之外，对于移动网站，您有两个基本选择。
You can have distinct desktop and mobile sites, or a single responsive site which works on all devices.
您可以拥有不同的桌面和移动网站，也可以拥有一个适用于所有设备的响应式网站。
For the first option you can redirect mobile users to a completely different URL where you host a mobile only version of the site. To do this you can manage the redirection with something like http://detectmobilebrowsers.mobi/or there are lots of variations for redirection with .htaccess files.
对于第一个选项，您可以将移动用户重定向到一个完全不同的 URL，您可以在该 URL 中托管仅移动版本的网站。为此，您可以使用诸如http://detectmobilebrowsers.mobi/ 之类的内容来管理重定向，或者使用 .htaccess 文件进行重定向有很多变体。
Jquery Mobileis one really good way to develop the mobile only site after that.
在此之后，Jquery Mobile是开发仅限移动网站的一种非常好的方法。
This approach has the advantage that it's easier to develop a lightweight mobile only version of your site. One disadvantage is that you will have two websites to maintain -- desktop and mobile.
这种方法的优点是可以更轻松地开发网站的轻量级移动版。一个缺点是您将有两个网站需要维护——桌面版和移动版。
The other option is the responsive approach that others have suggested. Here you basically have the one site which reconfigures depending on the widow size of the visitor's browser. Bootstrapand Foundationare two excellent options, and there are plenty of others as well.
另一种选择是其他人建议的响应式方法。在这里，您基本上拥有一个根据访问者浏览器的寡妇大小重新配置的站点。Bootstrap和Foundation是两个很好的选择，还有很多其他选择。
Responsive sites rely on media queries to find out the window size. This is well supported in modern browsers but there will be issues with older browsers that you may need to work around. Some of the advantages of a responsive site are that you maintaining just the one site, and in theory it works for all screen and window sizes so it won't cause a problem when the next mobile device with a different screen size is released.
响应式网站依靠媒体查询来找出窗口大小。这在现代浏览器中得到了很好的支持，但您可能需要解决旧浏览器的问题。响应式站点的一些优点是您只维护一个站点，理论上它适用于所有屏幕和窗口大小，因此在发布具有不同屏幕大小的下一个移动设备时不会引起问题。
Good luck, it's an interesting time to be doing web design.
祝你好运，现在是做网页设计的有趣时间。
回答by juco
You need to look in to responsive design. There are many free open source frameworks out there that can get you started, perhaps the most popular being bootstrapand foundation.
