Question

我正在开始我的第一个移动网站。它很简单，应该很容易，但我确实有一些问题：

请回答任何或所有问题！

1）如何告诉网站为移动流量提供“styles_mobile.css”表？是否有最常用的代码？

2）我有一个索引页面并且正在创建一个新的移动设备：“/ index_mobile.htm”是“错误的”。移动页面应该是它自己的实体（例如/mobile.htm）还是基于现有的索引页面？我该如何重定向？如何创建地址“m.mywebsiteaddress.com”

3）目前我正在笔记本电脑上进行编辑，然后看看他们看起来像是要将它们上传到我的ISP以查看我的编辑对我的iPhone的影响 - 我如何直接从我的Mac上做到这一点？

4）有一个标准结构wrt html元素？例如。标准doc有html，head和body元素。 HTML5现在有标题，导航和页脚元素 - 我应该注意哪些特定的mobi？

这一切都是现在，但我可以看到自己在接下来的几天里加入这个。任何指针或临时建议欢迎

Answer 1

我对移动设备的体验是，您需要将其视为一个完全不同的网站。不同的html，不同的CSS，不同的js。我见过的许多实现只是将其标记为地址m.site.com或www.site.com/m/。关键要素是分别考虑它们。

关于您的问题：

有各种框架可以帮助根据设备区分流量。诀窍是检查浏览器发送的用户代理进行区分。根据用户代理，您可以将流量发送到您创建的两个站点中的每个站点。 Spring有一些基本功能来执行此操作spring-mobile。
这可以追溯到我的答案的第一部分。我通常创建一个名为/m的目录，其中包含html，css和js。您可以使用基于用户代理的http redirect将流量发送到每个站点。至于创建m.site.com，它取决于您设置的内容，您可以创建子域名。
您可以直接在Mac上发布，具体取决于您使用的是哪种软件。在您的Mac中，您可以转到系统首选项/共享并启用Web共享。这实际上会激活你的mac中的apache服务器。如果您将文件放在/ Users / yourid / Sites / project中，则可以通过点击http://yourlocalip/~yourid/project来访问它。我是通过记忆这样做的，所以我可能会离开这里或那里。
我建议您查看jquery + jquerymobile为您的移动网站。它会在这个过程中消除很多悲伤。

Answer 2

1）如何告诉网站为移动流量提供“styles_mobile.css”表？是否有最常用的代码？

您可以使用包含媒体查询的链接样式表：

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

2）我有一个索引页面并且正在创建一个新的移动设备：“/ index_mobile.htm”是“错误的”。移动页面应该是它自己的实体（例如/mobile.htm）还是基于现有的索引页面？我该如何重定向？如何创建地址“m.mywebsiteaddress.com”

另一个选项是提供一个页面（index.html），并在查看区域缩小时开始将浮动元素堆叠在一起。在桌面和手机上查看http://www.html5rocks.com/en/。或者，如果您的手机暂时不在您附近，只需调整浏览器大小并观看网站开始删除多个列并创建单列视图。它们只提供一个文件（即index.html），而不是将移动用户重定向到移动页面（即mobile.html）。

3）目前我正在笔记本电脑上进行编辑，然后看看他们看起来像是要将它们上传到我的ISP以查看我的编辑对我的iPhone的影响 - 我如何直接从我的Mac上做到这一点？

在Mac上安装Apache Server，在正确的端口（端口80和8080 IIRC）上执行端口转发，您将能够查看手机上的页面，而无需经常上传文件一个ISP。该URL将是（http：//xx.xxx.xx.xx）或类似的内容。

4）有一个标准结构wrt html元素？例如。标准doc有html，head和body元素。 HTML5现在有标题，导航和页脚元素 - 我应该注意哪些特定的mobi？

不，移动浏览器会呈现与桌面浏览器相同的HTML标记。您应该考虑做的一件事是使用HTML5文档类型（移动浏览器支持），因为即使在使用视口元标记时，使用XHTML或HTML4文档类型在移动浏览器中看起来很正常也很难获得“动员”网站因为网站看起来会非常缩小。

到目前为止，这是我在移动网络开发方面遇到的最好的资源。

http://www.html5rocks.com/en/mobile/mobifying/

Answer 3

前两个答案都很好，但我并不完全赞同。它们太复杂了。

使用CSS媒体查询为不同的屏幕宽度和/或方向设置不同的内容样式。
不要打扰。为了可维护性，您应该创建一个使用媒体查询设置不同的网站。
再次，媒体查询。您可以使用(max-device-width: 480px)直接在浏览器中开发/调试，而不是将(max-width)用于移动设备。否则，如果您使用的是OS X，Xcode附带的iOS模拟器可以很好地工作（包括iPad！）
否。这只是一个正常的网页。

作为旁注，我认为你不应该在移动设备的另一个样式表中加载建议。加载另一个样式表意味着一个额外的HTTP请求。您可以在主样式表中保留所有媒体查询样式。

Answer 4

要在“常规”样式表（即桌面样式表）中使用媒体查询，请执行以下操作：

/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }

/* queries for devices with a max viewing area of 480px */
@media only screen and (max-width: 480px) {
  body { background: #444444; }
}

可以在桌面浏览器中测试上述CSS。例如，将上面的样式放入样式标记中，并在浏览器中以大于480px的宽度查看页面（最大化窗口可以）。然后，调整窗口宽度的大小，直到您看到背景变为深色（一旦窗口宽度小于480px，就会发生这种情况）。

第一个移动网站

4 个答案: