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

我正在创建一个需要能够自行调整到手机/平板电脑用户的twitter引导页... 我正在使用“隐藏手机”和其他类：http://twitter.github.com/bootstrap/scaffolding.html#responsive
它完美地工作，并显示完全不同例如在手机上的风格。twitter bootstrap - 响应式网页设计：在移动设备上加载时间？

我唯一关心的是移动设备上的加载时间。例如，如果我有一些带有“隐藏电话”类的代码，必须检查它是否必须呈现。那么，为移动用户提供一个单独的.html/.php文件会更好吗？还是有没有更好的方式来加载每个jQuery的，CSS和其他JavaScript的东西和HTML代码在移动设备上？

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

来源

2013-03-22 trainoasis

不幸的是，这只是响应式设计的问题之一，即使并非所有资产都以较小的屏幕尺寸显示，您通常也必须加载所有资产。 – 2013-03-22 12:37:23

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

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'] 
});

如果你设计的框架/代码库好，它会降低足迹适用于手机和所有其他设备。

来源

2013-03-22 14:06:42 nickhar

这可能就是它！我希望当一切都完成后，移动设备/平板电脑的响应速度将会更好。如果需要，我会检查yepnope和Modernizr。谢谢 – trainoasis 2013-03-23 17:42:25

如果大图像是一个问题，我尝试通过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

您可以通过使用百分比图像配的背景div的宽度细化这更和使用新的CSS选项，如cover or contain在div内缩放图像。

这种方法对于网站上的所有图片都不实用，但是假设您在主页上有大的闪屏图片，我发现这很麻烦。

编辑
另一个图像相关的选项，这是有趣的是adaptive-images.com其调整大小根据观众的屏幕尺寸上飞的图像，并打破你设置点。

它可以在响应式网站上追溯安装，因此可能值得测试以查看它是否与您的网站匹配良好。

祝你好运！

来源

2013-03-23 16:48:15

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

回答

相关问题