在我为响应式网页设计整理方便工具的过程中,我遇到了一个问题--
编写脚本是为了启用以下测试,以便有条件地加载资源:
if (matchMedia('only screen and (max-width: 480px)').matches) {
// run small-screen related dom scripting
}
这个脚本是否会在没有帮助的情况下在IE 6-8中执行其工作,以强制这些浏览器响应媒体查询,或者它需要respond.js的帮助?
它的源代码很短,位于上面链接的github存储库。
我有两个媒体查询大小-
only screen and (min-width: 980px)and (max-width: 1499px)";
only screen and (min-width: 768px)and (max-width: 979px)";
Safari正在应用第二个媒体查询,而浏览器宽度仍在第一个媒体查询的范围内--当window.innerwidth在980-995之间时。
我从没见过这个-有什么想法吗?
更新-
因此,我发现了这个问题--新的OSX的媒体查询使用document.documentElement.clientWidth作为度量--而所有其
在对CSS和JS代码进行研究时,用户还没有看到这些内容,我脑海中就有了一些东西。CSS媒体查询究竟是什么时候运行的?哪个js和jquery函数首先运行(document.onload、document.ready等)?当我对其进行研究时,我发现了和问题,它们解释了域内容加载函数、document.ready函数和window.onload函数之间的差异。但是,与这些函数相比,我无法确定CSS中的媒体查询是什么时候运行的。所以我通过JSFiddle在上查了一下。
在HTML部分中,我只编写了带有和ID的div;
<div id="testDiv">
Test Me
我在网页上有一个文本框,我为这个页面编写了一个css @media查询(特别是三星Galaxy S4)。当这个页面被加载时,所有@媒体设备(三星Galaxy S4除外)的一切正常工作,即使文本框是聚焦的。
当我在这个设备上测试它时,页面看起来和其他设备一样(在页面加载上),但是当我关注textbox时,所有的元素(图像、文本等等)都是一样的。在这页上被移开了。
我的CSS媒体查询(针对三星Galaxy S4)在style.css文件中:
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-device-wi
我最近问了一个问题,关于如何使用媒体查询,同时支持对不支持媒体查询的旧浏览器的回退。唯一的答案(虽然它有效)是使用adapt.js之类的javascript来确定加载哪个样式表。
我一直在修修补补,并意识到一个令人难以置信的简单的解决方案,无论如何,在IE7中对我都有效,如下所示:
.wrapper{width:1024px;}
@media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
@media all and (max-width: 1024px) {
.wrapper{width:1024px;}
第n-of-type不是在媒体查询内部工作,而是在IE8中同一css文件的媒体查询之外工作。
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js" ></script>
和css:
.j-container:nth-of-type(1), .j-container:nth-of-type(3) {
background-color: #eee;
}/* It is working */
@media screen and (max-w