移动检测或屏幕大小

Question

我想开始使用jQuery移动我的一些网站，以前我一直使用媒体查询来检测屏幕尺寸和提供基于屏幕尺寸的css，但我的一些客户会做得更好的移动版本的网站，这意味着重定向到mobile.website.com，而不是使用css，这将允许我在某些情况下更好地开发与jQuery mboile。我的问题是什么是最好的方法，你必须检测用户代理还是仅仅检测屏幕大小。如果是这样，那么做这件事的最好方法是什么，我读过很多种方法，但似乎没有任何一种标准。在过去，我使用一个脚本来检测移动设备，桌面mac上的Safari浏览器也拿起了它，我在这方面的知识并不是很多，所以我会非常感谢任何值得一读的文章或知识。

我注意到Android浏览器倾向于选择768及以下，而iphone选择480及以下，有时我发现我有4个不同的样式表，如果我能检测到移动设备是否重定向到url。一种适用于所有移动设备类型的解决方案

坚持响应式设计和CSS更好吗？提前感谢您的评论

Answer 1

如果你正在开发一个只支持移动设备的网站，最好使用jQuery移动版。如果你想让这个网站同时在移动设备和桌面上工作，这不是一个好的选择。

jQuery移动版使用更多的流畅布局，确保您的网站在不同的屏幕尺寸上呈现良好。当您需要根据屏幕大小隐藏/显示信息时，as resposive设计非常有用。

由于需求更侧重于检测屏幕尺寸，而不是检测浏览器，因此最好使用响应式设计，使用媒体查询来支持移动设备和平板电脑。

Answer 2

你在使用ASP.NET MVC吗？在这种情况下，要显示移动视图而不是web视图，您所要做的就是复制您的常规视图，并将.Mobile附加到这些视图上。因此，假设您的常规页面是index.cshtml -要制作一个移动版本，您所要做的就是复制它，名称为index.mobile.cshtml，MVC会为您处理它。

教程- http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

现在，如果你不使用MVC，而只是做一个基本的html/javascript网站，那么你基本上需要依赖css媒体标签，并在此基础上创建不同的标记。

Twitter bootstrap是做这件事的另一种选择，因为他们的CSS中有一个几乎开箱即用的响应式设计

http://getbootstrap.com/getting-started/