3

I'm embarking on my first mobile site. Its a simple one and should be easy enough but I do have some questions:

Please answer any or all q's you can!

1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?

2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"

3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?

4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?

That's all for now but I can see myself adding to this over the next few days. Any pointers or ad hoc advice welcome

4

4 回答 4

2

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

关于您的问题：

  1. 有各种框架可以帮助根据设备区分流量。诀窍是检查浏览器发送的用户代理来进行区分。根据用户代理，您将向您创建的两个站点中的每一个发送流量。Spring 有一些基本功能来完成这个spring-mobile。

  2. 这可以追溯到我回答的第一部分。我通常会创建一个名为的目录，/m其中包含html、css和js。您可以使用基于用户代理的http 重定向将流量发送到每个站点。至于创建m.site.com，这取决于您的设置以及您是否可以创建子域。

  3. 您可以直接在 Mac 上发布，具体取决于您使用的软件。在您的 Mac 中，您可以转到系统偏好设置/共享并启用网络共享。这实际上会在你的 mac 中激活一个 apache 服务器。如果您将文件放在 /Users/yourid/Sites/project 中，则可以通过点击http://yourlocalip/~yourid/project来访问它。我是凭记忆这样做的，所以我可能会在这里或那里离开。

  4. 我建议您为您的移动网站查看 jquery + jquerymobile。它会在这个过程中带走很多悲伤。

于 2012-05-06T16:58:34.763 回答
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 服务器，在正确的端口（端口 80 和 8080 IIRC）上进行端口转发，您将能够在手机上查看页面，而无需不断地将文件上传到 ISP。URL 将是 (http://xx.xxx.xx.xx) 或类似的东西。

4) 是否有标准结构 wrt html 元素？例如，标准文档有 html、head 和 body 元素。HTML5 现在有页眉、导航和页脚元素 - 是否有任何我应该注意的特定于 mobi 的元素？

不，移动浏览器呈现与桌面浏览器相同的 HTML 标记。您应该考虑做的一件事是使用 HTML5 doctype（移动浏览器支持），因为即使使用 viewport 元标记，我也很难让使用 XHTML 或 HTML4 doctypes 的“移动”网站在移动浏览器中看起来不错因为这些网站看起来非常缩小。

这是迄今为止我偶然发现的关于移动 Web 开发的最佳资源。

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

于 2012-05-06T17:03:51.177 回答
1

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

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

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

于 2012-05-06T17:10:16.880 回答
0

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

/* 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 可以在桌面浏览器中测试。例如，将上面的样式放入样式标签中，然后在浏览器中以大于 480 像素的宽度查看页面（最大化窗口即可）。然后，调整窗口宽度，直到您看到背景变为深色（一旦窗口宽度小于 480 像素，就会发生这种情况）。

于 2012-05-09T02:53:12.133 回答