我正在创建一个 twitter 引导页面，该页面需要能够根据手机/平板电脑用户进行自我调整...
我正在使用“隐藏电话”和其他课程：http://twitter.github.com/bootstrap/scaffolding.html#responsive
例如，它完美地工作并在手机上显示出完全不同的风格。
我唯一关心的是移动设备上的加载时间。例如，如果我有一些带有“隐藏电话”类的代码，则必须检查它以知道它不能被渲染。那么，为移动用户创建一个单独的 .html/.php 文件会更好吗？ 或者有没有更好的方法来不在移动设备上加载每个 jquery、css 和其他 javascript 内容和 html 代码？
我希望问题足够清楚，如果没有，请告诉我，我会尽力解释得更好。
【问题讨论】：
标签： twitter-bootstrap responsive-design
您可以创建单独的文件和脚本来支持不同的设备或屏幕尺寸，但这会创建一个有点零散的代码库。
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']
});
如果您设计好您的框架/代码库，它将减少移动设备和所有其他设备的占用空间。
【讨论】：
如果大图像是个问题，我会尝试通过 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 的宽度使用百分比来进一步优化这一点，并使用 cover or contain 等新的 CSS 选项来缩放 div 内的图像。
这种方法并不适用于网站上的所有图片，但是假设您的主页上有一个大的初始图片，我发现它值得麻烦。
编辑
另一个有趣的图像相关选项是adaptive-images.com，它会根据查看者的屏幕尺寸和您设置的断点动态调整图像大小。
它可以追溯安装在响应式网站上，因此可能值得测试它是否适合您的网站。
祝你好运！
【讨论】：