有没有办法使用javascript获取用户设备宽度,而不是视口宽度？
正如我所说,CSS媒体查询提供了这一点
@media screen and (max-width:640px) {
/* ... */
}
和
@media screen and (max-device-width:960px) {
/* ... */
}
如果我的目标是横向智能手机,这将非常有用.例如,在iOS max-width:640px上,即使在iPhone 4上,也会针对横向和纵向模式进行声明. 据我所知,这不是Android的情况,因此在此实例中使用设备宽度成功地定位两个方向,没有针对桌面设备.
但是,如果我基于设备宽度调用javascript绑定,我似乎仅限于测试视口宽度,这意味着额外的测试,如下所示,
if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }
考虑到设备宽度可用于css,这对我来说似乎并不优雅.
Yeoman的快速入门和包管理器指南建议使用Bower来管理依赖项.
他们安装进去了
app/bower_components/[component_name]
该指南只是建议插入一个
<script src="app/bower_components/[component_name]/[relevant_file.js]"></script>
行到你的html文件.
没关系.除非该组件具有依赖性.Bower帮助提取这些组件,但据我所知,它没有给出它们的列表以及它们需要插入代码的顺序.(我知道你得到一个安装时已安装的内容列表,并且可以从某个地方的json文件中挖出它,但这仍然只是bower的组件名称,而不是需要的实际文件的路径引用).这意味着,对于像jquery-maonsonry这样的流行组件,我必须手动插入
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventies.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
我必须进入所有这些并找到相关的js文件名.鉴于所有这些文件都已经在json依赖项文件中定义,并且bower知道它们,有没有办法可以自动生成上面的代码.要么是我手动输入我的html,要么是指向watch命令输出的symLink.我知道require.js可能代表我管理这个问题,但是有办法解决需要吗？
从iOS中的setTimeout中使用时,jQuery的focus()方法似乎不起作用.
所以,
setTimeout( function () {
// Appears to have no effect in iOS, fine in Chrome/Safari/Firefox/IE
$('.search').focus();
}, 500);
但就它本身而言,
// works fine.
$('.search').focus();
请参阅以下示例:
http://jsfiddle.net/nwe44/ypjkH/1/
如果focus()调用是在setTimeout之外进行的,那么它就可以了.这是非常好奇的,因为其他方法确实有效.例如,在我的jsFiddle中,我可以更改边框颜色,只是不要对焦它.有任何想法吗？
第三方开发人员正在为我们构建一个kentico站点,并且在头部元素中有一个asp:Literal标签打印,交付给最终用户.标签如下,
<asp:Literal runat="server" ID="litTags" EnableViewState="false" />
这至关重要吗？它导致标记失败验证和一些浏览器抱怨.他说这对于模板很重要,但是我看不到任何在Kentico自己的网站或任何展示网站上打印的迹象.我可以看到标签出现在kentico的模板文档中,所以我假设标签没有被服务器正确解析.
不是Kentico或ASP人我不能给他任何建议.有任何想法吗？
在webkit每晚构建和chrome canary上,每个位置固定的元素似乎都获得了超高的z-index值,无论它是内联还是CSS文件中给出的内容.
有关示例,请访问http://nick-evans.com.
您认为这是这些测试版中的错误,还是我的代码中的错误？
我在我的例子中可以想到的唯一原因是在使用jQuery tmpl加载页面之后渲染了较低的元素(这是对伪延迟加载的尝试).
.horizontal-carousel将显式z-index设置为1并设置为position:fixed,同时.col设置为z-index:9除了第一个section元素的内容之外的所有内容都具有相反的关系,因此轮播中的图像覆盖了它们的描述.
UPDATE
它发生在我身上,未经明确的代码会有所帮助.这是一个链接