移动网站优化

Question

我在做一个新网站。它将是博客风格，但从零开始，而不是使用现有的模板或软件(如WordPress)，主要是为了实验。

我的问题是，我应该怎么做才能使网站针对移动设备进行优化？我想优化它的风格，使之适合较小的屏幕，但不创建一个单独的页面和重定向基于用户正在观看的设备。基本上，我想创建一个包含内容的页面，两个样式表，并确保根据用户正在查看的设备类型应用适当的样式表。

做这件事的最好方法是什么？

Answer 1

您只是在寻找一种方法来检测浏览器并应用正确的CSS吗？如果这就是全部，试着使用CSS Media Types。您可以将一个样式表设置为screen，另一个设置为handheld

<LINK REL="stylesheet" TYPE="text/css" MEDIA="screen" HREF="desktop.css">
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="mobile.css">

这让设备/浏览器来决定它想要使用哪种类型，而不是试图基于来自服务器的某种浏览器检测来强迫用户使用某种样式。

这种方法的另一个好处是，如果您使用CSS来定义大量的图像资源(而不是img标记)。handheld样式表可以使用较少的这些资源，因此移动浏览器永远不会知道或关心它们。

Answer 2

为这两种变化创建单独的样式表是一个很好的想法，但正如您所说的“针对移动设备进行了优化”，仅仅拥有自定义的CSS是不够的。网站的移动端友好还有其他因素，如网站加载速度，内容，移动用户体验等。

要深入了解这个话题，你可以参考mobile optimization上的这篇文章。