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

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

晚风撩人 发布于 2016-11-16 字数 162 浏览 1148 回复 5

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

灵芸 2017-10-19 5 楼

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

 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" : "";
};

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

虐人心 2017-08-07 4 楼

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

灵芸 2017-06-13 3 楼

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

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

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

偏爱自由 2017-06-09 2 楼

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

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" : "";
};

清晨说ぺ晚安 2017-05-28 1 楼

你这里提到的是个很大的话题:自适应网页设计(Responsive Web Design)

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