Fatal编程技术网
  • html/
  • Html 第一移动站点

Html 第一移动站点

html css mobile

Html 第一移动站点,html,css,mobile,Html,Css,Mobile,我正在着手我的第一个移动网站。这是一个简单的问题，应该很容易，但我确实有一些问题： 请回答任何或所有你能回答的问题 1） 我如何告诉网站为手机流量提供“styles_mobile.css”表单？有没有最常用的代码 2） 我有一个索引页面，正在创建一个新的移动页面：“/index\u mobile.htm”这是“错误”吗。移动页面应该是它自己的实体（例如/mobile.htm）还是基于现有索引页面？如何重定向它？如何创建地址“m.mywebsiteaddress.com” 3） 目前，我正在笔记本

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

请回答任何或所有你能回答的问题

1） 我如何告诉网站为手机流量提供“styles_mobile.css”表单？有没有最常用的代码

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

3） 目前，我正在笔记本电脑上进行编辑，然后为了查看它们的外观，我不得不将它们上传到我的ISP上，以查看我在iphone上编辑的效果——如何直接从Mac电脑上进行编辑

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

现在就这些，但我可以看到我自己在接下来的几天里增加了这一点。欢迎任何指点或特别建议

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

关于你的问题：

  • 有各种各样的框架可以帮助区分不同设备的流量。诀窍是检查由浏览器发送的用户代理是否进行识别。根据用户代理，您将向您创建的两个站点中的每个站点发送流量。Spring有一些基本的功能来实现这一点

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

  • 您可以直接在mac上发布，具体取决于您使用的软件。在mac电脑中，您可以进入系统首选项/共享并启用web共享。这实际上会激活mac中的apache服务器。如果你把你的文件放在/Users/yourid/Sites/project中，你可以通过点击来访问它。我凭记忆做这件事，所以我可能会离开这里或那里

  • 我建议您看看移动站点的jquery+jquerymobile。这将在这个过程中消除很多悲伤

    • 1） 我如何告诉网站为手机流量提供“styles_mobile.css”表单？有没有最常用的代码

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

    <link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
    2） 我有一个索引页面，正在创建一个新的移动页面：“/index\u mobile.htm”这是“错误”吗。移动页面应该是它自己的实体（例如/mobile.htm）还是基于现有索引页面？如何重定向它？如何创建地址“m.mywebsiteaddress.com”

    另一种选择是服务于一个页面（index.html），随着查看区域的缩小，开始将浮动元素堆叠在另一个页面上。在桌面和手机上查看。或者，如果您的手机目前不在您身边，只需调整浏览器大小，然后观察网站开始删除多个列并创建一个列视图。它们只提供一个文件（即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（移动浏览器支持），因为在使用移动终端浏览器时，即使在使用视口元标签时，使用“XMLT”或“HTML4 DOCTYPE”的“移动化”网站也有很大的麻烦。 这是迄今为止我在移动web开发方面遇到的最好的资源

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

  • 使用CSS媒体查询为不同的屏幕宽度和/或方向设置不同的内容样式
  • 不用麻烦了。为了便于维护，您只需创建一个与媒体查询风格不同的站点
  • 同样，媒体质疑。您可以使用
    （最大宽度）
    并直接在浏览器中进行开发/调试，而不是对手机使用
    （最大设备宽度：480px）
    。否则，如果您使用的是OSX，那么Xcode附带的iOS模拟器工作得很好（也包括iPad！）
  • 不，这只是一个普通的网页
    • 作为补充说明，我认为您不应该接受为移动设备加载另一个样式表的建议。加载另一个样式表意味着一个额外的HTTP请求。您可以在主样式表中保留所有媒体查询样式。

    要在“常规”样式表（即桌面样式表）中使用媒体查询，请执行以下操作 
    /* 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; }
}