JavaScript-如何识别用户终端屏幕的大小，并做相应的显示优化？

Question

想知道2个问题：
1. 如何判断用户终端屏幕的大小？
2. 知道了大小之后应该如何根据不同的大小做可适应的优化？最好不要产生多套不同的代码，不方便维护。

Answer 1

给你一个检测浏览器的方法：

 function detectBrowser(ns) {
var ua = ns.ua = navigator.userAgent;
ns.isWebKit = (/webkit/i).test(ua);
ns.isMozilla = (/mozilla/i).test(ua);
ns.isIE = (/msie/i).test(ua);
ns.isFirefox = (/firefox/i).test(ua);
ns.isChrome = (/chrome/i).test(ua);
ns.isSafari = (/safari/i).test(ua) && !this.isChrome;
ns.isMobile = (/mobile/i).test(ua);
ns.isOpera = (/opera/i).test(ua);
ns.isIOS = (/ios/i).test(ua);
ns.isIpad = (/ipad/i).test(ua);
ns.isIpod = (/ipod/i).test(ua);
ns.isIphone = (/iphone/i).test(ua) && !this.isIpod;
ns.isAndroid = (/android/i).test(ua);
ns.supportStorage = "localStorage" in window;
ns.supportOrientation = "orientation" in window;
ns.supportDeviceMotion = "ondevicemotion" in window;
ns.supportTouch = "ontouchstart" in window;
ns.supportTransform3d = ('WebKitCSSMatrix' in window);
ns.cssPrefix = ns.isWebKit ? "webkit" : ns.isFirefox ? "Moz" : ns.isOpera ? "O" : ns.isIE ? "ms" : "";
};

从网上收集整理的 算是比较全面的了。

Answer 2

我个人的思路是加载之前先判断分辨率然后加载不同的css，其实屏幕的分辨率也就那么几种，考虑主流的就行了，再不行了就做自适应，不要把宽度定列，只要规划得当，效果也很好！你看一下亚马逊的首页，效果就很好！

Answer 3

以下这几个属性可以获取客户端屏幕的宽高信息：

屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

至于你说的优化，你在做页面制作时采用百分比的宽高来做，这样就能适应不同的分辨率，但有一个问题是始终没办法解决所有问题啦，因为你网页上的图片是有大有小的，图片的大小不可能随分辨率的大小而改变，否则会变形了。

Answer 4

给你一个检测浏览器的方法：

function detectBrowser(ns) {
var ua = ns.ua = navigator.userAgent;
ns.isWebKit = (/webkit/i).test(ua);
ns.isMozilla = (/mozilla/i).test(ua);
ns.isIE = (/msie/i).test(ua);
ns.isFirefox = (/firefox/i).test(ua);
ns.isChrome = (/chrome/i).test(ua);
ns.isSafari = (/safari/i).test(ua) && !this.isChrome;
ns.isMobile = (/mobile/i).test(ua);
ns.isOpera = (/opera/i).test(ua);
ns.isIOS = (/ios/i).test(ua);
ns.isIpad = (/ipad/i).test(ua);
ns.isIpod = (/ipod/i).test(ua);
ns.isIphone = (/iphone/i).test(ua) && !this.isIpod;
ns.isAndroid = (/android/i).test(ua);
ns.supportStorage = "localStorage" in window;
ns.supportOrientation = "orientation" in window;
ns.supportDeviceMotion = "ondevicemotion" in window;
ns.supportTouch = "ontouchstart" in window;
ns.supportTransform3d = ('WebKitCSSMatrix' in window);
ns.cssPrefix = ns.isWebKit ? "webkit" : ns.isFirefox ? "Moz" : ns.isOpera ? "O" : ns.isIE ? "ms" : "";
};

Answer 5

你这里提到的是个很大的话题：自适应网页设计（Responsive Web Design）

提供几篇文章，可以看看：
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/