[英]Detect screen resolution and modify layout
I need to check whether user's resolution is <1300px or >1300px and if it is <1300px to load layout with horizontal divs and if it is >1300px to load layout with vertical divs. 我需要检查用户的分辨率是<1300px还是> 1300px,是否小于1300px才能加载水平div的布局,是否大于1300px来加载垂直div的布局。
Template is the same I only need to put one div in horizontal or vertical position depening on resolution. 模板是一样的,我只需要根据分辨率将一个div放在水平或垂直位置即可。
Since I cannot do it with PHP, I have to do it with javascript, so I would have to use "load" function to load part of my template where is vertical or horizontal div? 由于我无法使用PHP执行此操作,因此必须使用javascript进行操作,因此必须使用“加载”功能加载模板的一部分,该模板的垂直或水平div是什么? I'm using Yii framework 我正在使用Yii框架
Typically this sort of thing is in the CSS domain (via media queries ), not the JavaScript domain. 通常,这种事情在CSS域中(通过媒体查询 ),而不在JavaScript域中。
You can use the screen
object , though, to get the dimensions of the user's screen: 不过,您可以使用screen
对象获取用户屏幕的尺寸:
var width = screen.width; // Or screen.availWidth;
You can use CSS media query for that: 您可以为此使用CSS媒体查询:
// For screen < 1300px
@media screen and (max-width: 1300px) {
.foo {
...
}
}
// For screen > 1300px
@media screen and (min-width: 1300px) {
.foo {
...
}
}
In JavaScript you can detect it by: 在JavaScript中,您可以通过以下方式检测到它:
window.screen.availHeight
window.screen.availWidth
while in CSS you need to use media queries : 而在CSS中,您需要使用媒体查询 :
@media screen and (min-width: 1200px)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.