我怎么可以设计一个网站，用于移动电话的

StackOverflow https://stackoverflow.com/questions/624262

  •  05-07-2019
  •  | 
  •  

题

我怎么可以开始发展一个网站，可以浏览，从移动电话？例如，如果浏览Gmail网站的iPhone的网站看起来不同于正常的网站。你必须设计的两个不同的网站做到这一点？我怎么能知道，如果该网站被访问过的移动浏览器？

有帮助吗？

解决方案

您无需设计两个不同的网站，但您可能希望移动用户访问您的网站非常重要。

有几种方法可以解决这个问题，每种方法都有利有弊。我假设您的网站在数据库中有自己的信息，并使用一组模板发布该数据？ （就像Ruby on Rails或Django站点; PHP站点;博客等;）如果你手工编写了一堆静态HTML页面，那么对你来说这将是更加劳动密集的。

1：相同的HTML，不同的SCREEN和MOBILE样式表

这个想法：您为所有请求提供相同的HTML结构。您为SCREEN创建样式表，为MOBILE创建一个样式表。

好：对你来说，程序员。维护2个样式表比维护2个完全独立的模板站点更容易。

糟糕：对于您的用户。在移动设备上易于使用的站点通常对普通浏览器来说效率低下;针对台式机/笔记本电脑优化的网站经常在移动设备上惨遭失败。显然，这取决于您对页面进行编码的方式，但在大多数情况下，将普通网站推送到移动浏览器对您的用户来说将是不利的。 （参见 http://www.useit.com/alertbox/mobile-usability.html 总结Jakob Nielsen最近在移动网站上的可用性研究。）

2：维护单独的网站

（Gmail维护的系统超过2个！它们基本上有不同的容器应用程序/模板来处理相同的数据：完整的AJAX浏览器版本;纯HTML浏览器版本;基本移动版本;原生黑莓应用程序;以及原生iPhone应用程序。）

这是真正关心移动和桌面存在的网站的新兴标准。这对你来说更有用，但总的来说它对你的用户来说要好得多。

从好的方面来说，你可以创建一个适用于移动设备的简化纯HTML网站，它可以作为没有javascript的罕见网络用户的后备，或者是那些阻止他们使用的主要辅助功能问题“完整的”现场。

此外，根据您的用户群：在美国，人们通常可以访问台式机/笔记本电脑，并使用他们的移动设备进行辅助访问。例如，我使用台式电脑预订机票和租车，但我想在手机上查看我的预订代码。在许多情况下，您可以放弃限制在移动站点上提供的功能，并要求完整的计算机执行不常见的用例。

基本程序：

  1. 设计＆amp;为移动和屏幕构建UI。
  2. 以两个不同的网址启动网站;新兴的会议是桌面版的www.yoursite.com，移动版的m.yoursite.com。 （如果用户知道约定，则允许用户直接浏览m.yoursite.com。）
  3. 在www.yoursite.com上，嗅探用户代理并测试用户的浏览器是否可移动。如果是这样，请将用户定向到m.yoursite.com。
    1. 您可以使用各种服务器语言（PHP，Perl等）编写的嗅探器。检查许可证。 以下是用PHP编写的嗅探器示例。
    2. 来自维基百科关于用户代理嗅探的文章：“专门针对移动电话的网站，比如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live！门户网站通常严重依赖用户代理嗅探，因为移动浏览器通常彼此差异很大。移动浏览的许多发展在过去几年已经取得，而许多旧手机没有发布

其他提示

大多数移动设备，这些天支持的"移动式表"这是简单的备用样式表显示简单的事情。你可以添加一个移动的样式表给你的站点正常方式，包括 media="handheld" 属性：

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

然后这些样式将适用于手机。

唯一的问题与这个方法是如果你HTML是体积庞大，它可能需要一段时间，为网页载由于大多数移动浏览器都慢(除了迷你剧).这就是为什么更大的站点像flickr和推荐使用独立的网站。

附加说明：

  • 笨重HTML不影响剧小的多，因为它使用一个代理而不呈现在外部，然后发送一个特殊的"图像"的设备。
  • 使用简单、清洁HTML然后你可以发送相同的正常浏览器和移动设备
  • 你必须检查组合的样式 media 属性。请参考加入上述代码会让浏览器将会忽略第一个样式表。如果你加入 media="all" 第一，两者将用于(并因此可以替代原来的样式，而不是重新开始).

要查看移动浏览器中的weppage外观，请使用 Opera Mini Emulator

查看 WURFL 项目。它的目的是帮助开发人员定位多个手机浏览器，并在HD Safari，WAP和XHTML-MP时代开始回归Mobile Safari之前。然而，它是最新的，存储iPhone等现代设备的功能。它拥有超过400种设备的数据，并具有Java，PHP，Perl，Ruby，Python，.NET，C ++库。根据您希望定位移动应用程序的广度，可以查看。 这是使用WURFL的网站列表。

Luca Passani（WURFL的联合创始人和维护者）撰写的另一个相关项目是 Switcher 。您可以使用此功能自动重定向到您网站的移动版本。

保持简单，想想 迷你剧 你会得到它的权利。(iPhone有更多的断一个正常的浏览器...)

  1. 侧重于内容

  2. 避免插件

  3. 按照该网络的标准

  4. 单独的内容，从布局/设计、使用css尽posible.

  5. 用文字和图片。

增加的其余部分花里胡哨的如果必须的，但要确保该网站：s内容总是可以甚至当花哨被关闭。如果你可以浏览该网页有一个简单的浏览器就像山猫和正常浏览器，如火狐那么你是在正确的轨道。

更多信息，随意参观 任何浏览器运动

编辑：在这种情况下不明显你的工作与不同的css为不同类型的浏览器，但总是使用相同的内容。请访问 css禅宗的花园 一个不错的演示。

更新：增加一个链接到css媒体类型，如通过其他手持选项，是有趣的。

  

你必须设计两个不同的站点才能做到这一点吗？

是

  

我如何知道移动浏览器是否访问该网站？

您的编程语言可能有某种方式来查看客户的信息。例如，PHP有一个超全局变量 $ _ SERVER ，它具有服务服务器和访问客户端的各种信息。在这种情况下，您会对 $ _ SERVER ['HTTP_USER_AGENT'] 的值感兴趣，如果我访问页面，它会产生以下结果：

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

这告诉您我正在使用Safari 4.0运行Mac OS X 10.5.6。存在用于各种移动浏览器的已知关键字。例如，iPhone的一个版本的浏览器具有以下用户代理：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

“iPhone”已经放弃，但进一步通过关键词“移动”确认。和“Safari”

大多数网站的移动网站子域略有不同（大多数使用“m”）。例如 flickr 使用 m.flickr.com

（建议使用 .mobi TLD ，但我从来没有看到用过了）

使设计变得非常简单，不要使用太多的图形，您需要尽可能地保持它们。 这可能对设计有所帮助。

我可能会为移动用户构建一组不同的页面，使用与主站点相同的业务对象等。

如果两个景点的设计之间的差异不是很大，那么您可以通过提供单独的CSS文件来获得一种方式吗？

您的网站应该限制在可以支持最高要求的手机上。你甚至无法接受所有的手机。

您的网站应该有不同的css样式集，HTTP AGENT必须根据Css选择的请求检查客户端类型。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top