相关疑难解决方法(0)
如何在Javascript中获取iPad屏幕宽度
我需要使用Javascript从网页动态获取所有移动设备的屏幕大小.
我试过这个:
//get window's size
if (document.body && document.body.offsetWidth) {
windowsWidth = document.body.offsetWidth;
windowsHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
windowsWidth = document.documentElement.offsetWidth;
windowsHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
windowsWidth = window.innerWidth;
windowsHeight = window.innerHeight;
}
但在iPad上我得到这个尺寸:980 x 1080(不是真正的768 x 1024).
谢谢
毛罗
推荐指数
解决办法
查看次数
如何检测div中水平滚动的结束？
我试图在div中实现水平滚动.我的问题是如何检测水平滚动的结束？
我试过这样的事
$(function() {
var scrollLeftPrev=0;
$('#scrollquestion').scroll( function() {
var newScrollLeft=$('#scrollquestion').scrollLeft();
if(scrollLeftPrev===newScrollLeft){
alert('right end');
}
if(newScrollLeft===0){
alert('left end');
}
console.log($('#scrollquestion').width());
console.log(newScrollLeft);
scrollLeftPrev=newScrollLeft;
});
});
左端警报有效,因为它将对所有设备大小变为0.对于右端,它取决于设备大小.
屏幕:
推荐指数
解决办法
查看次数
调整大小浏览器时,Modernizr Media查询不起作用
我在JavaScript中使用Modernizr媒体查询来更改元素边距并添加"小"类.当我调整浏览器大小时,我的Modernizr媒体查询不起作用,但是当我刷新页面时,它可以工作.我知道我可以使用jQuery $( window ).resize()函数解决这个问题,但我想用媒体查询来解决它.任何人都能告诉我如何解决这个问题吗？
<html class="no-js">
<head>
<title>Foundation 5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if (Modernizr.mq('(max-width: 767px)')) {
$("#secondary").addClass("small");
$("#secondary").css("margin", " 25px");
}
});
</script>
<style type="text/css">
#primary {
width: 300px;
height: 200px;
background-color: black;
}
#secondary {
margin: 0 auto;
width: 250px;
height: 150px;
background-color: white;
position: absolute;
}
</style>
</head>
<body>
<div id="primary">
<div id="secondary">
</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
如何检测响应式网页设计的屏幕尺寸？
我用Google搜索了一个quirksmode网站,它可以为您提供屏幕尺寸.拉起控制台我看到了,screen.width并且screen.height可以从窗口对象直接获得.
我想在纯JavaScript中进行检测才能开始.我可以在所有设备和浏览器中使用此属性 - 移动设备,平板电脑,PC和Chrome,Safari,IE,Firefox.
我不关心由于重新调整大小等视图端口的变化.只是屏幕的实际大小不会改变.
我希望有一个属性,我可以检查设备和浏览器.
以下是维基百科关于响应式网页设计的一些一般信息.
推荐指数
解决办法
查看次数
使用JavaScript获得相当于“最大宽度：600像素”的CSS
这是此问题的后续问题：使用javascript获取设备宽度。
我正在尝试做的是@media (max-width: 600px)在JavaScript中获得等效的CSS 。
该接受的答案说要做到以下几点：
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
那还正确吗？它适用于所有设备吗？
如果正确，检查的目的是(window.innerWidth > 0)什么？
我想知道它是否仍然有效。如果您查看答案的最后评论（有6票赞成票），则会显示：
这怎么有这么多投票？
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;在iPhone 6和6 Plus上返回667。此解决方案无法正常工作。
推荐指数
解决办法
查看次数
@ angular / flex-layout如何：基于屏幕尺寸的不同类？
有没有办法让@ angular / flex-layout 根据屏幕大小更改类？
我知道我可以这样做：
<div fxFlex="grow" fxLayout="row" fxLayout.xs="column">
和这个：
<div fxFlex="22" fxFlex.md="10px" fxHide.lg>
等等
我希望能够执行以下操作：
<div class="myWideClass" class.xs="myNarrowClass">
有什么方法可以做这种事情-根据屏幕宽度更改类吗？
谢谢！
推荐指数
解决办法
查看次数