Question

我正在创建一个Twitter引导页面，需要能够自己调整到手机/平板电脑用户...... 我正在使用“隐藏电话”和其他课程：http://twitter.github.com/bootstrap/scaffolding.html#responsive
它完美地工作，并在手机上显示完全不同的风格。

我唯一关心的是移动设备上的加载时间。例如，如果我有一些带有“hidden-phone”类的代码，则必须检查它是否必须知道它不能被渲染。那么，为移动用户提供单独的.html / .php文件会更好吗？或者有没有更好的方法来不加载每个jquery，css和其他javascript的东西和移动设备上的HTML代码？

我希望这个问题很清楚，如果没有，请告诉我，我会尽力解释。

Answer 1

您可以创建单独的文件和脚本来支持不同的设备或屏幕大小，但这会产生一些零碎的代码库。

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。

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

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

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

Answer 2

如果大图像是个问题，我会尝试通过CSS将它们加载为背景图像。这允许您使用@media请求为不同的视点指定不同的（背景）图像，例如

@media (min-width:980px){

.image-background{
width:800px;
height:400px;
background:url("large-image.jpg") top left no-repeat;
}
}

@media (max-width:600px){

.image-background{
width:400px;
height:200px;
background:url("phone-image.jpg") top left no-repeat;
}
}  

etc

您可以使用百分比作为.image-background div的宽度来进一步细化，并使用新的CSS选项（如cover or contain）来缩放div中的图像。

这种方法对于网站上的所有图片都不实用，但是假设您在主页上有一个大的启动图像，我发现这是值得的。

修改
另一个有趣的图像相关选项是adaptive-images.com，可以根据观看者的屏幕大小和您设置的断点动态调整图像大小。

它可以追溯安装在自适应网站上，因此可能值得测试，看看它是否适合您的网站。
祝你好运！

twitter bootstrap - 响应式网页设计：在移动设备上加载时间？

2 个答案: