3

我正在创建一个 twitter 引导页面，该页面需要能够根据手机/平板电脑用户进行自我调整……我正在使用“隐藏电话”和其他类：http: //twitter.github.com/bootstrap/scaffolding。 html#responsive
它可以完美运行，例如在手机上显示完全不同的风格。

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

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

4

2 回答 2

2

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

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() 媒体查询测试，它允许您通过测试媒体查询来执行或包含 JS 函数/脚本：

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

如果你设计好你的框架/代码库，它将减少手机和所有其他设备的占用空间。

于 2013-03-22T14:06:42.567 回答
1

如果大图像是一个问题，我会尝试通过 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 选项（如覆盖或包含）来缩放 div 内的图像。

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

编辑
另一个有趣的图像相关选项是adaptive-images.com，它根据查看者的屏幕尺寸和您设置的断点动态调整图像大小。

它可以追溯安装在响应式站点上，因此可能值得测试它是否适合您的站点。

祝你好运！

于 2013-03-23T16:48:15.297 回答