twitter-bootstrap - 推特 Bootstrap - 响应式网页设计 : load time on mobile devices?

Question

我正在创建一个 Twitter Bootstrap 页面，它需要能够针对手机/平板电脑用户进行 self 调整 ...我正在使用“隐藏电话”和其他类:http://twitter.github.com/bootstrap/scaffolding.html#responsive
它完美地工作，并在手机上显示出完全不同的风格。

我唯一关心的是移动设备上的加载时间。例如，如果我有一些带有“隐藏电话”类的代码，则必须检查它以了解它不能被渲染。那么，为移动用户准备一个单独的 .html/.php 文件会更好吗？或者有没有更好的方法来不在移动设备上加载每个 jquery、css 和其他 javascript 内容和 html 代码？

我希望问题足够清楚，如果没有，请告诉我，我会尽力解释得更好。

Answer 1

您可以创建单独的文件和脚本来支持不同的设备或屏幕尺寸，但这会创建一个有点支离 splinter 的代码库。

Bootstrap 内置了媒体查询，因此，您可以使用它们来扩展或限制它们根据屏幕宽度使用的 CSS。您可以将它们拆分并执行类似操作，而不是包括每个设备的所有类和样式:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="default.css"/>
<link rel="stylesheet" media="screen and (max-width: 1023px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="phone.css"/>

用 javascript 做同样的事情也很容易。您可以为您的 JS 文件提供媒体查询样式包含。一个例子是使用脚本加载器 yepnope.js和 Modernizr .

您可以使用 mq() media query testing在 yepnope 中，它允许您通过测试媒体查询来执行或包含 JS 函数/脚本:

yepnope({
    Modernizr.mq('only screen and (max-width: 485px)') // Media query test
    yep  : 'phone.js',
    nope : ['default.js', 'tablet.js'] 
});

如果您的框架/代码库设计得当，它将减少移动设备和所有其他设备的占用空间。