如何建立一个移动网站

发布：2021-11-12 15:44:19 浏览：2251

• 如何实施移动样式表格

     为网站创建移动功能支持的第一步是建立一个专门适用于移动终端设备CSS的样式表。

1. 服务器端方法及UA字符串

其中的方法之-就是把涉及检测用户代理字符串的移动样式表用像PHP这样的服务器端语言来进行编写。有了这项技术，网站将能检测出移动终端设备并提供合适的样式表，或者将用户重新定向到另- -个移动网络的子域，例如m.facebook.com. 这种服务器端方法有以下几个优点:一是能 够最大限度地保证网站的兼容性，二是它能允许浏览网站的移动终端用户查看-些权限较高的内容。虽然这项技术能够完美应用于企业级的专业网站，但是其存在的一些实际问题使它很难在大多数普通网站上加以运用。因为几乎每时每刻都在产生新的用户代理字符串，所以想保存当前的UA字符串列表是不可能的。. 此外，这种方法依赖于设备本身接替其真实用户代理的能力，所以在互联网，发展过程中很多浏览器都通过骗取用户代理的UA字符串来解决这种类型的检测。例如，在20世纪90年代，大多数UA字符串都以“Moilla”开头从而通过网景公司的检查，而近几年来，Opera 浏览器又假装成IE浏览器，十分混乱。分混乱。就像彼得·保罗·科赫所写的一样: “这简直就是一个军备竞赛， 如果设备检测真的流行起来，那么浏览器开发者就会开始骗取他们用户的代理字符串来尽快结束这个检测。

2. 客户端方法及媒体查询

或者使用另外一种更简单的方法，那就是直接从客户端上对移动终端设备进行检测。最早的检测所包含的移动样式表的方法还包括利用样式表的媒体类型来检测，例如: <link rel="stylesheet" href="site.css"media="s<link rel=”stylesheet" href=" mobile.css"medias" hadhele, 在这里我们提到了两个样式表，第一个是sit.css,主要用于台式电脑本电脑所使用的屏幕媒体类型，而第二个mobile.css则主要用于手持的移动终端设备。虽然这的确是一个很不错的解决办法,但是设备支持与否又是另外老一批的移动终端设备基本都支持手持媒体类型，同时它们在实施过程中。伴随着很多变化:有些手机禁用屏幕样式表，并且只加载手持媒体类刑其他的两项都允许。另外,如今大多数新推出的移动终端已经和手持数码设备没有明显的区分了这样以便于网站开发者摈弃毫无生气的移动Web布局，从而为用户提供计能更加全面的网页浏览体验。从移动终端设备使用了典型的小屏幕，我们就能通过检测设备屏幕宽度是否小于等于480像素来确定其是不是手持数码设备: <link rel=" stylesheet" href=”mobile.css” media=” only screenand (max-device width:480px)”/>由于之前较老的一些手机不支持媒体查询功能，所以这种方法只是用于新推出的部分手机，所以我们需要- -个两 全其美的解决方法来挖掘这个绝大的潜在市场。首先，定义两个样式表:常规浏览器下无限制的screen.css,用antiscreen. CSS覆盖所有你不想在移动终端设备上显示的格式。将这两个样式表组合成一个新的样式表core.css : import url(“screen.css”); @import url(“antiscreen.css”) handheld; eimport url(“antiscreen.css" ) only screen and<link rel=" stylesheet" href=" mobile . css” media=" onlyand (max-device width:480px)” />
由于之前较老的一些手机不支持媒体查询功能，所以这种方法只是用于新推出的部分手机，所以我们需要一个两全 其美的解决方法来挖掘这个绝大的潜在市场。首先，定义两个样式表:常规浏览器下无限制的screen.css,用antiscreen. CSs覆盖所有你不想在移动终端设备上显示的格式。将这两个样式表组合成一个新的样式表core.css:
@import url( “screen.css" ); @import url( “antiscreen. css”) handheld; @import url( “antiscreen.css" ) only screen and(max-device-width:480px); 最后，用移动浏览器新增的格式来定义- -个新的样式表handheld.cs再将其链接到页面上: <link rel=” stylesheet" href= ”core.css" media= ”screen” /><link rel=" stylesheet" href=" handheld. css”media=”handheld, only screen and (max-device-width: 480px)" />
虽然这项技术占有移动终端市场很大的市场份额，但这并不意味着它就是完美的。像iPad这样像素宽度超过480的移动终端设备,这种方法是行不通的。换一个角度看，这些体积更大的移动设备也不需要简明的页面布局。随着技术的不断发展，将会有越来越多的移动终端设备不再适用于这种检测模式。可惜的是，由于目前所谓的“标准”都是刚形成的，并未成为固定不变的条目，所以在未来想要推动更新移动设备的检测方法也是很有难度的。除了设备检测有不理想的地方，媒体查询这种方法同样也存在一些问题。 主要问题是，媒体查询只对具有差异性的网页内容样式有用，而且它不能控制网页文本的发送。例如，用媒体查询的方法可以隐藏-个侧栏的内容，但是这并不能有效防止用户下载标记。出于对移动互联网宽带速度的考虑，新添加的HTML不能被人们忽视。

3. 用户启动法

考虑到使用移动UA监测的各种困难和媒体查询的各种缺陷，像宜家等企业就让用户自己决定是否需要查看公司网站的移动版本。这是一种最容易实现，也是最能保证万无-失的办法，但是这种办法还有一个很明显的缺点，那就是产生了过多的人机互动，降低了用户的自主程度。这样的网站一般在页面都有专门用于传送用户到其移动网站的链接，--般都这样表示“访问移动网站版本"。这种方法也有不好的地方，由于这个链接在页面是可见的，所以无论是使用什么设备，只要你在浏览网页，你就可能看见它，而很多移动用户很有可能没有注意这个链接，但是一些并不使用移动终端设备的用户又错点了那个链接，这叫人有点哭笑不得。尽管如此，这种方法还是有值得学习的地方的，那就是能够让用户自主决定是否访问移动网站。有些用户喜欢用他们的移动设备访问页面简洁的网站，而有些用户则更喜欢没有限制的页面布局，从而能够一下子浏览整个网站，因人而异。

• 移动样式表的变化

如今我们已经对移动样式表进行了很多优化，是时候开始对我们想要改进的移动页面风格进行具体细节的讨论了。

1. 用屏幕实际使用面积的增加与改变

移动样式表的初衷是让网页在较小的屏幕上得到很好的显示。首先，这表示我们要将多列布局缩减为单列布局。大多数的手机屏幕都是竖直的，所有水平方向能利用的空间显得格外珍贵，而且手机的整体页面布局很难容纳超过- -列的文本显示。. 其次，通过设置页面布局来减少整体的杂乱感，除了必要的显示内容和文本，其他的内容-律不留。最后，通过缩减页边距和页面填充来节省额外的像素以保持整个页面结构的严谨和简洁。

2. 降低带宽

修改移动样式表的另一个目的就是通过降低带宽来保证访客在低速网络环境下仍然能够正常使用网页。首先确保你已经移除或替换了所有的页面背景图片，特别是那些- -进入网站页面就能看到的背景图片。然后再设置显示成不显示任何不必要的图片。如果你的网站使用了图片作为行动按钮和导航图标，请考虑将这些图片更换为纯文本或者与CSS想匹配的代码。如果你一-定要强制浏览器使用图片替代文字的话，你可以选择使用下面的代码(使用JavaScript来为图片添加类文本代码并且保证alt属性在你的标记中是正确定义的):

• 超越样式表

除了移动样式表，我们还可以通过标记来增加许多特别的移动网络功能。

1. 可触电话拨号

很明显的，手持设备中的一大部分指的就是手机，那么让我们使手机拨号变得更加简易：
<a href=" tel :15032084566”class=" phone- link">(503) 208-4566</a>通过以上设置，你就能呼叫这个电话号码了，同时也有一些事第一，因为电话网络是国际通用的，所以前提是你所输入的电话号机数字"1”开头(而且“1” 是美国的电话代码)。其次，不管这个号码是否能拨通，你必须使用手机来打。由于上述方法。。们并没有通过服务端法来讲解，最好的办法就是隐瞒这串数字链接是通过CSs来实现的事实。所以在你的屏幕样式表上要使用手机连接类禁用这些链接格式，然后在手机上也要做相同的设置。

2. 专有输入法

在使用移动在使用移动Web浏览器的时候，另一个值得注意的事情是标准的全尺寸键盘很难很好地完成输入。但是我们可以利用一些特殊 的HTML5输入编码来帮助我们的用户更好地完成输入。这类输入方式能够让像iPhone这样的移动设备在进行文字输入时实现上下文的联想跟踪显示。例如，当你输入"tel” 时，就会触发数字键盘，然后使你能马上输入一串电话号码，还有当你输入"email” 时，键盘会自动跟踪显示@xx.的各种地址选项。HTML5输入类型在移动和非移动浏览中都提供了有效的系统自带浏览器验证和专门的输入菜单。此外，由于不支持浏览器自发的降级区浏览，诸如<input type=" text" /> 这样的特殊输入类型，所以现在在移动互联网网站里普遍使用HTML5输入类型也是行不通的。

3. 定义视窗大小

当今的移动终端设备在呈现-个网页页面时，它们通常都会通过压缩页面内容来使他们更适合设备的视口或者可视面积。虽然默认的视窗定位通常都能与页面布局和谐搭配，但是有时候对视窗进行适当的调整也是很有必要的。苹果公司最先推出-种通过使用<meta>标签的办法来完成视窗定义，而且其他的设备制造商也开始使用这种方法。