手机网站101

Question

关于创建我的第一个移动网站，我不知道从哪里开始。这是一个简单的html/css网站，所以我希望我能够快速拼凑起来。

我怎么知道哪个样式表来使用基于访问者是否是移动还是不是浏览器？

我习惯用我的文本编辑器和萤火虫来建立基本网站。我是否需要其他工具？

我要去虽然用我的直觉和创建移动网站，尺寸是流体，或许与固定的字体大小。

是否有指导或某些指标有人可以把我的方式吗？有什么我需要特别注意的吗？清单？我试图尽可能保持简单。

Whats mobile site ABC？

Answer 1

在一个理想的世界，你会告诉手机浏览器通过定义一个“手持式”媒体样式表使用移动样式表，如下所示：

<link rel="stylesheet" href="handheld.css" media="handheld"/> 

不幸的是，这会不会对许多移动工作浏览器。为什么？提供浏览器手机的手机供应商不希望被视为提供“贫民窟”移动互联网 - 只有桌面内容才能满足需求。这意味着大多数制造商构建浏览器来故意忽略媒体类型。

相反，你将不得不成为基于用户代理嗅探样式表（或重定向与移动UA字符串用户移动子域）。您必须在服务器级别执行此操作。

至于建设和调试 - 有手机模拟器在那里，但他们的行为是不完整，并且有大量的设备，在那里。你可能不得不为仅仅测试一些常见平台而试图设计围绕最低公分母进行设计。这意味着假设设备可能不够聪明，无法下载在无关CSS中指定的图像（所以不要试图用CSS媒体查询来排除大图像），或者设备可能无法执行JavaScript（大多数设备都具有较差的JS处理能力） 。

哦，还有一件事：如果你要使用JavaScript，尝试以伪命名空间包裹你的方法。许多移动提供商拦截Web请求并插入他们自己的JS来替换需要大量带宽的图像和其他元素。通常，这些方法使用通用名称，比如'main'等等，并且由于缺少名称空间，会与作者定义的方法冲突。

除此之外，看看这篇文章（http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/），祝你好运！

Answer 2

您可以使用@ media-queries构建网站，这样您可以根据屏幕尺寸等目标设置不同的设备。您可以使用@ media-queries查看http://mediaqueri.es的网站示例。我发现用于测试网站的优秀网站是http://www.responsinator.com/，因为您仍然可以在Chrome，Safari或Firefox中使用开发人员工具。

如果您决定走此路线，请查看Ethan Marcotte的书Responsive Web Design http://www.abookapart.com/products/responsive-web-design。

Answer 3

您可以使用元标记[code] viewport [/ code]根据屏幕宽度更改CSS表单。