我该如何设计手机网站

时间：2022-07-03 17:31:20

How can i start the development of a site that can be browse from mobile phones? For example, if you browse Gmail site from an iPhone the site looks different from the normal site. You have to design two differents sites to do this? How can I know if the site is accessed by a mobile browser?

如何开始开发可以从手机浏览的网站?例如,如果您从iPhone浏览Gmail网站,该网站看起来与普通网站不同。你必须设计两个不同的网站来做到这一点?如何知道移动浏览器是否访问该网站?

8 个解决方案

#1

You don't HAVE to design two different sites, but you probably want to if it's important to let mobile users access your site.

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

There are a few ways to deal with this problem, each with pros and cons. I'm assuming that your site has its information in a database, and publishes that data using a set of templates? (Like a Ruby on Rails or Django site; a PHP site; a blog; etc.) If you've hand-coded a bunch of static HTML pages, this is going to be way more labor intensive for you.

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

1: Same HTML, different stylesheets for SCREEN and MOBILE

1:相同的HTML,不同的SCREEN和MOBILE样式表

The idea: You deliver the same HTML structure to all requests. You create a stylesheet for SCREEN and one for MOBILE.

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

Good: For you, the programmer. It's easier for you to maintain 2 stylesheets than it is to maintain 2 totally separate template sites.

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

Bad: For your users. A site that's easy to use on a mobile device usually is inefficient for a normal browser; and sites optimized for a desktop / laptop often fail miserably on a mobile device. Obviously it depends on how you code your pages, but in most cases, pushing your normal site to a mobile browser will be bad for your users. (See http://www.useit.com/alertbox/mobile-usability.html for a summary of Jakob Nielsen's recent usability research on mobile sites.)

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

2: Maintain separate sites

2:维护单独的站点

(Gmail maintains even more than 2 systems! They basically have different container applications / templates that process the same data: the full AJAX browser version; the plain HTML browser version; a basic mobile version; a native Blackberry application; and a native iPhone application.)

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

This is the emerging standard for sites that really care about having both a mobile and desktop presence. It's more work for you, but in general it's much better for your users.

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

On the upside, you can probably create one stripped down pure HTML site that works for mobile and that acts as a fallback for the rare web user who doesn't have javascript, or who has major accessibility issues that prevent them from using the "full" site.

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

Also, depending on your user base: in the US, people generally have access to a desktop / laptop, and use their mobile devices for auxiliary access. For example, I book my plane tickets and rental car using my desktop computer, but I want to look up my reservation code on my mobile. In many cases, you can get away with limiting the functionality that you offer on the mobile site, and require the full computer to perform uncommon use cases.

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

The basic procedure:

基本程序:

  1. Design & build UIs for mobile and screen.

    2. 设计和构建移动和屏幕的UI。

  2. Launch the sites at two different URLs; the emerging convention is www.yoursite.com for the desktop version, and m.yoursite.com for the mobile version. (This allows users to browse directly to m.yoursite.com if they know of the convention.)

    3. 以两个不同的URL启动网站;新兴的会议是桌面版的www.yoursite.com,移动版的m.yoursite.com。 (如果用户知道约定,则允许用户直接浏览m.yoursite.com。)

  3. On www.yoursite.com, sniff the user agent and test to see if the user's browser is mobile. If so, direct the user to m.yoursite.com.
    1. There are sniffers written in various server languages (PHP, Perl, whatever) that you can probably use. Check the licenses. Here's an example of a sniffer written in php.

      2. 有各种服务器语言(PHP,Perl,无论如何)都可以使用的嗅探器。检查许可证。这是一个用php编写的嗅探器的例子。

    2. From Wikipedia's article on user agent sniffing: "Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."

      3. 来自*的关于用户代理嗅探的文章:“专门针对移动电话的网站,如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live!门户网站,往往很大程度上依赖于用户代理嗅探,因为移动浏览器往往彼此差异很大。移动浏览在过去几年中已经取得了成功,而许多不具备这些新技术的旧手机仍在大量使用。因此,移动网络门户通常会产生完全不同的标记代码,具体取决于用于浏览它们的手机。可以很小(例如调整某些图像的大小以适应较小的屏幕),或者相当广泛(例如用WML而不是XHTML渲染页面)。“

    4. 在www.yoursite.com上,嗅探用户代理并测试用户的浏览器是否可移动。如果是这样,请将用户定向到m.yoursite.com。有各种服务器语言(PHP,Perl,无论如何)都可以使用的嗅探器。检查许可证。这是一个用php编写的嗅探器的例子。来自*的关于用户代理嗅探的文章:“专门针对移动电话的网站,如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live!门户网站,往往很大程度上依赖于用户代理嗅探,因为移动浏览器往往彼此差异很大。移动浏览在过去几年中已经取得了成功,而许多不具备这些新技术的旧手机仍在大量使用。因此,移动网络门户通常会产生完全不同的标记代码,具体取决于用于浏览它们的手机。可以很小(例如调整某些图像的大小以适应较小的屏幕),或者相当广泛(例如用WML而不是XHTML渲染页面)。“

  4. On m.yoursite.com, provide a link back to www.yoursite.com. Users who click on this link should NOT be redirected back to the mobile site, and how you accomplish this depends on your implementation.

    5. 在m.yoursite.com上,提供返回www.yoursite.com的链接。不应将点击此链接的用户重定向回移动网站,如何完成此操作取决于您的实施。

You may want to follow Quirksmode for his emerging articles about mobile testing.

您可能想要关注Quirksmode的新兴文章,了解移动测试。

3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets

3:模板根据用户代理输出不同的数据块,并维护单独的样式表

Like (2), this requires you to sniff the user agent. Unlike (2), you're still using all the same page logic and don't have to maintain two separate sites. This might be okay if you're just dealing with a blog or website that's mostly about reading data.

与(2)类似,这需要您嗅探用户代理。与(2)不同,您仍然使用所有相同的页面逻辑,而不必维护两个单独的站点。如果您只是处理主要是阅读数据的博客或网站,这可能没问题。

In your template code, you can say things like

在您的模板代码中,您可以说出类似的内容

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

This lets you mostly maintain one set of template files. You can also streamline the pages that you're sending to your mobile users, so they don't get a big bloated page when they just wanted to read your blog post or whatever.

这使您可以主要维护一组模板文件。您还可以简化您发送给移动用户的页面,这样当他们只是想阅读您的博客文章或其他内容时,他们就不会获得大页面。

#2

The majority of mobile devices these days support "mobile stylesheets" which are simply alternate stylesheets to display things simpler. You can add a mobile stylesheet to your site in the normal way and include the media="handheld" attribute:

如今,大多数移动设备都支持“移动样式表”,这些样式表只是替代样式表,可以更简单地显示事物。您可以按常规方式向您的网站添加移动样式表,并包含media =“handheld”属性:

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

Then those styles will apply to mobiles.

那些样式将适用于手机。

The only problem with this method is if your HTML is bulky, it may take a while for the page to load since most mobile browsers are slower (except Opera Mini). That's why the bigger sites like flickr and digg use separate sites.

这种方法的唯一问题是,如果你的HTML体积庞大,可能需要一段时间才能加载页面,因为大多数移动浏览器都比较慢(Opera Mini除外)。这就是为什么像flickr和digg这样的大型网站使用不同的网站。

Additional notes:

  • Bulky HTML doesn't affect Opera Mini as much because it uses a proxy which does the rendering externally then sends a special "image" to the device.

    • 庞大的HTML不会影响Opera Mini,因为它使用代理从外部进行渲染,然后向设备发送特殊的“图像”。

  • Use simple, clean HTML then you can send the same to normal browsers and mobile devices

    • 使用简单,干净的HTML,然后您可以将其发送到普通的浏览器和移动设备

  • You'll have to check on the combinations of stylesheets with media attributes. IIRC adding the code above will make browsers ignore the first stylesheet. If you add media="all" to the first one, both will be used (and you can thus override the original styles rather than start afresh).

    • 您必须检查具有媒体属性的样式表组合。 IIRC添加上面的代码将使浏览器忽略第一个样式表。如果将media =“all”添加到第一个,则将使用两者(因此您可以覆盖原始样式而不是重新开始)。

#3

For checking how a weppage looks in a mobile Browser use Opera Mini Emulator

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

#4

Check out the WURFL project. Its intention is to help developers target multiple phone browsers, and started way back before there was Mobile Safari, back in the days of HDML, WAP and XHTML-MP. It's up-to-date however, storing capabilities of modern devices such as iPhone. It has data on over 400 devices, and has libraries in Java, PHP, Perl, Ruby, Python, .NET, C++. Depending on how broad you want to target your mobile app it's something to look at. Here's a list of sites that use WURFL.

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

Another related project written by Luca Passani (the co-founder and maintainer of WURFL) is Switcher. You can use this to automatically redirect to the mobile version of your site.

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

#5

Keep it simple, think opera mini and you will get it right. (iPhone has more off a normal browser...)

保持简单,想想歌剧迷你,你会做对的。 (iPhone有更多正常的浏览器......)

  1. Focus on content

    专注于内容

  2. Avoid plugins

  3. Follow the web standards

    遵循Web标准

  4. Separate content from layout/design, use css as much as posible.

    将内容与布局/设计分开,尽可能使用css。

  5. Use text and pictures.

    使用文字和图片。

Add the rest of the bells and whistles if you must, but make sure the the site:s content is always available even when the bells and whistles are turned off. If you can browse the page with a simple browser like lynx and normal browser like firefox then you are on the right track.

如果必须的话,添加其余的铃声和口哨声,但要确保即使关闭铃声和口哨声,网站内容始终可用。如果您可以使用像lynx这样的简单浏览器和像firefox这样的普通浏览器浏览页面,那么您就是在正确的轨道上。

For more info feel free to visit the any browser campaign

欲了解更多信息,请随时访问任何浏览器广告系列

Edit: In case it is not obvious you work with different css for different types of browsers, but always use the same content. Visit the css zen garden for a nice demo.

编辑:如果不是很明显你使用不同类型的浏览器的不同CSS,但总是使用相同的内容。访问css zen花园,获得精彩的演示。

Update: Adding a link to css media types, and as stated by others it is the handheld option that is interesting.

更新:添加到css媒体类型的链接,并且如其他人所述,手持选项很有趣。

#6

You have to design two differents sites to do this?

你必须设计两个不同的网站来做到这一点?

Yes

How can I know if the site is accessed by a mobile browser?

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

Your programming language has probably some way of looking through the client's information. PHP, for example, has a superglobal variable $_SERVER that has all kinds of information of both the serving server, and the visiting client. In this case, you would be interested in the value of $_SERVER['HTTP_USER_AGENT'], which would give the following result, should I visit a page:

您的编程语言可能有某种方式来查看客户端的信息。例如,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

This tells you that I'm running Mac OS X 10.5.6, using Safari 4.0. There are known keywords for various mobile browsers. One version of iPhone's browser, for example, has the following user agent:

这告诉你我正在使用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

the "iPhone" already gives it away, but is further confirmed by the keywords "Mobile" and "Safari"

“iPhone”已经放弃了,但关键词“手机”和“Safari”进一步证实了这一点

#7

Most sites have a slightly different sub domain for mobile sites (most use "m"). e.g. flickr uses m.flickr.com

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

(there is a recommendation to use the .mobi TLD but I've never seen that used)

(建议使用.mobi TLD,但我从未见过使用过)

Make the design super simple, don't use too many graphics, where you need to keep them as small as possible. This might be helpful for the design.

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

I would probably construct a different set of pages for mobile users, making use of the same business objects etc. as you're using for the main site.

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

If the differences between the design of the two sights isn't to great you might be able to get a way with just serving separate CSS files?

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

#8

Your site should limiited to the mobile phone which can support on maximum requirements. you can not even entertain all the mobile phone.

您的网站应该限制在可满足最高要求的移动电话上。你甚至不能娱乐所有的手机。

Your web site should have different set of css style, and HTTP AGENT must check the client type according to the request Css selection should take place .

您的网站应具有不同的css样式集,并且HTTP AGENT必须根据Css选择应发生的请求检查客户端类型。

#1

You don't HAVE to design two different sites, but you probably want to if it's important to let mobile users access your site.

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

There are a few ways to deal with this problem, each with pros and cons. I'm assuming that your site has its information in a database, and publishes that data using a set of templates? (Like a Ruby on Rails or Django site; a PHP site; a blog; etc.) If you've hand-coded a bunch of static HTML pages, this is going to be way more labor intensive for you.

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

1: Same HTML, different stylesheets for SCREEN and MOBILE

1:相同的HTML,不同的SCREEN和MOBILE样式表

The idea: You deliver the same HTML structure to all requests. You create a stylesheet for SCREEN and one for MOBILE.

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

Good: For you, the programmer. It's easier for you to maintain 2 stylesheets than it is to maintain 2 totally separate template sites.

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

Bad: For your users. A site that's easy to use on a mobile device usually is inefficient for a normal browser; and sites optimized for a desktop / laptop often fail miserably on a mobile device. Obviously it depends on how you code your pages, but in most cases, pushing your normal site to a mobile browser will be bad for your users. (See http://www.useit.com/alertbox/mobile-usability.html for a summary of Jakob Nielsen's recent usability research on mobile sites.)

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

2: Maintain separate sites

2:维护单独的站点

(Gmail maintains even more than 2 systems! They basically have different container applications / templates that process the same data: the full AJAX browser version; the plain HTML browser version; a basic mobile version; a native Blackberry application; and a native iPhone application.)

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

This is the emerging standard for sites that really care about having both a mobile and desktop presence. It's more work for you, but in general it's much better for your users.

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

On the upside, you can probably create one stripped down pure HTML site that works for mobile and that acts as a fallback for the rare web user who doesn't have javascript, or who has major accessibility issues that prevent them from using the "full" site.

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

Also, depending on your user base: in the US, people generally have access to a desktop / laptop, and use their mobile devices for auxiliary access. For example, I book my plane tickets and rental car using my desktop computer, but I want to look up my reservation code on my mobile. In many cases, you can get away with limiting the functionality that you offer on the mobile site, and require the full computer to perform uncommon use cases.

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

The basic procedure:

基本程序:

  1. Design & build UIs for mobile and screen.

    2. 设计和构建移动和屏幕的UI。

  2. Launch the sites at two different URLs; the emerging convention is www.yoursite.com for the desktop version, and m.yoursite.com for the mobile version. (This allows users to browse directly to m.yoursite.com if they know of the convention.)

    3. 以两个不同的URL启动网站;新兴的会议是桌面版的www.yoursite.com,移动版的m.yoursite.com。 (如果用户知道约定,则允许用户直接浏览m.yoursite.com。)

  3. On www.yoursite.com, sniff the user agent and test to see if the user's browser is mobile. If so, direct the user to m.yoursite.com.
    1. There are sniffers written in various server languages (PHP, Perl, whatever) that you can probably use. Check the licenses. Here's an example of a sniffer written in php.

      2. 有各种服务器语言(PHP,Perl,无论如何)都可以使用的嗅探器。检查许可证。这是一个用php编写的嗅探器的例子。

    2. From Wikipedia's article on user agent sniffing: "Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."

      3. 来自*的关于用户代理嗅探的文章:“专门针对移动电话的网站,如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live!门户网站,往往很大程度上依赖于用户代理嗅探,因为移动浏览器往往彼此差异很大。移动浏览在过去几年中已经取得了成功,而许多不具备这些新技术的旧手机仍在大量使用。因此,移动网络门户通常会产生完全不同的标记代码,具体取决于用于浏览它们的手机。可以很小(例如调整某些图像的大小以适应较小的屏幕),或者相当广泛(例如用WML而不是XHTML渲染页面)。“

    4. 在www.yoursite.com上,嗅探用户代理并测试用户的浏览器是否可移动。如果是这样,请将用户定向到m.yoursite.com。有各种服务器语言(PHP,Perl,无论如何)都可以使用的嗅探器。检查许可证。这是一个用php编写的嗅探器的例子。来自*的关于用户代理嗅探的文章:“专门针对移动电话的网站,如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live!门户网站,往往很大程度上依赖于用户代理嗅探,因为移动浏览器往往彼此差异很大。移动浏览在过去几年中已经取得了成功,而许多不具备这些新技术的旧手机仍在大量使用。因此,移动网络门户通常会产生完全不同的标记代码,具体取决于用于浏览它们的手机。可以很小(例如调整某些图像的大小以适应较小的屏幕),或者相当广泛(例如用WML而不是XHTML渲染页面)。“

  4. On m.yoursite.com, provide a link back to www.yoursite.com. Users who click on this link should NOT be redirected back to the mobile site, and how you accomplish this depends on your implementation.

    5. 在m.yoursite.com上,提供返回www.yoursite.com的链接。不应将点击此链接的用户重定向回移动网站,如何完成此操作取决于您的实施。

You may want to follow Quirksmode for his emerging articles about mobile testing.

您可能想要关注Quirksmode的新兴文章,了解移动测试。

3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets

3:模板根据用户代理输出不同的数据块,并维护单独的样式表

Like (2), this requires you to sniff the user agent. Unlike (2), you're still using all the same page logic and don't have to maintain two separate sites. This might be okay if you're just dealing with a blog or website that's mostly about reading data.

与(2)类似,这需要您嗅探用户代理。与(2)不同,您仍然使用所有相同的页面逻辑,而不必维护两个单独的站点。如果您只是处理主要是阅读数据的博客或网站,这可能没问题。

In your template code, you can say things like

在您的模板代码中,您可以说出类似的内容

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

This lets you mostly maintain one set of template files. You can also streamline the pages that you're sending to your mobile users, so they don't get a big bloated page when they just wanted to read your blog post or whatever.

这使您可以主要维护一组模板文件。您还可以简化您发送给移动用户的页面,这样当他们只是想阅读您的博客文章或其他内容时,他们就不会获得大页面。

#2

The majority of mobile devices these days support "mobile stylesheets" which are simply alternate stylesheets to display things simpler. You can add a mobile stylesheet to your site in the normal way and include the media="handheld" attribute:

如今,大多数移动设备都支持“移动样式表”,这些样式表只是替代样式表,可以更简单地显示事物。您可以按常规方式向您的网站添加移动样式表,并包含media =“handheld”属性:

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

Then those styles will apply to mobiles.

那些样式将适用于手机。

The only problem with this method is if your HTML is bulky, it may take a while for the page to load since most mobile browsers are slower (except Opera Mini). That's why the bigger sites like flickr and digg use separate sites.

这种方法的唯一问题是,如果你的HTML体积庞大,可能需要一段时间才能加载页面,因为大多数移动浏览器都比较慢(Opera Mini除外)。这就是为什么像flickr和digg这样的大型网站使用不同的网站。

Additional notes:

  • Bulky HTML doesn't affect Opera Mini as much because it uses a proxy which does the rendering externally then sends a special "image" to the device.

    • 庞大的HTML不会影响Opera Mini,因为它使用代理从外部进行渲染,然后向设备发送特殊的“图像”。

  • Use simple, clean HTML then you can send the same to normal browsers and mobile devices

    • 使用简单,干净的HTML,然后您可以将其发送到普通的浏览器和移动设备

  • You'll have to check on the combinations of stylesheets with media attributes. IIRC adding the code above will make browsers ignore the first stylesheet. If you add media="all" to the first one, both will be used (and you can thus override the original styles rather than start afresh).

    • 您必须检查具有媒体属性的样式表组合。 IIRC添加上面的代码将使浏览器忽略第一个样式表。如果将media =“all”添加到第一个,则将使用两者(因此您可以覆盖原始样式而不是重新开始)。

#3

For checking how a weppage looks in a mobile Browser use Opera Mini Emulator

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

#4

Check out the WURFL project. Its intention is to help developers target multiple phone browsers, and started way back before there was Mobile Safari, back in the days of HDML, WAP and XHTML-MP. It's up-to-date however, storing capabilities of modern devices such as iPhone. It has data on over 400 devices, and has libraries in Java, PHP, Perl, Ruby, Python, .NET, C++. Depending on how broad you want to target your mobile app it's something to look at. Here's a list of sites that use WURFL.

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

Another related project written by Luca Passani (the co-founder and maintainer of WURFL) is Switcher. You can use this to automatically redirect to the mobile version of your site.

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

#5

Keep it simple, think opera mini and you will get it right. (iPhone has more off a normal browser...)

保持简单,想想歌剧迷你,你会做对的。 (iPhone有更多正常的浏览器......)

  1. Focus on content

    专注于内容

  2. Avoid plugins

  3. Follow the web standards

    遵循Web标准

  4. Separate content from layout/design, use css as much as posible.

    将内容与布局/设计分开,尽可能使用css。

  5. Use text and pictures.

    使用文字和图片。

Add the rest of the bells and whistles if you must, but make sure the the site:s content is always available even when the bells and whistles are turned off. If you can browse the page with a simple browser like lynx and normal browser like firefox then you are on the right track.

如果必须的话,添加其余的铃声和口哨声,但要确保即使关闭铃声和口哨声,网站内容始终可用。如果您可以使用像lynx这样的简单浏览器和像firefox这样的普通浏览器浏览页面,那么您就是在正确的轨道上。

For more info feel free to visit the any browser campaign

欲了解更多信息,请随时访问任何浏览器广告系列

Edit: In case it is not obvious you work with different css for different types of browsers, but always use the same content. Visit the css zen garden for a nice demo.

编辑:如果不是很明显你使用不同类型的浏览器的不同CSS,但总是使用相同的内容。访问css zen花园,获得精彩的演示。

Update: Adding a link to css media types, and as stated by others it is the handheld option that is interesting.

更新:添加到css媒体类型的链接,并且如其他人所述,手持选项很有趣。

#6

You have to design two differents sites to do this?

你必须设计两个不同的网站来做到这一点?

Yes

How can I know if the site is accessed by a mobile browser?

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

Your programming language has probably some way of looking through the client's information. PHP, for example, has a superglobal variable $_SERVER that has all kinds of information of both the serving server, and the visiting client. In this case, you would be interested in the value of $_SERVER['HTTP_USER_AGENT'], which would give the following result, should I visit a page:

您的编程语言可能有某种方式来查看客户端的信息。例如,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

This tells you that I'm running Mac OS X 10.5.6, using Safari 4.0. There are known keywords for various mobile browsers. One version of iPhone's browser, for example, has the following user agent:

这告诉你我正在使用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

the "iPhone" already gives it away, but is further confirmed by the keywords "Mobile" and "Safari"

“iPhone”已经放弃了,但关键词“手机”和“Safari”进一步证实了这一点

#7

Most sites have a slightly different sub domain for mobile sites (most use "m"). e.g. flickr uses m.flickr.com

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

(there is a recommendation to use the .mobi TLD but I've never seen that used)

(建议使用.mobi TLD,但我从未见过使用过)

Make the design super simple, don't use too many graphics, where you need to keep them as small as possible. This might be helpful for the design.

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

I would probably construct a different set of pages for mobile users, making use of the same business objects etc. as you're using for the main site.

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

If the differences between the design of the two sights isn't to great you might be able to get a way with just serving separate CSS files?

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

#8

Your site should limiited to the mobile phone which can support on maximum requirements. you can not even entertain all the mobile phone.

您的网站应该限制在可满足最高要求的移动电话上。你甚至不能娱乐所有的手机。

Your web site should have different set of css style, and HTTP AGENT must check the client type according to the request Css selection should take place .

您的网站应具有不同的css样式集,并且HTTP AGENT必须根据Css选择应发生的请求检查客户端类型。

标签：

相关文章