我总结的手机web页面设计及编写规则，适用于xhtml basic 和 xhtml mp。仅代表个人观点。
1. 设计相关
1.1 硬件限制
推荐结构
手机屏幕由于尺寸、分辨率和色彩的限制，不能正常显示我们用于普通显示器的设计。在设计mobile web时要注意尽量避免产生滚动条，必需有滚动条时要保障只在一个方向上产生，如右图所示，不使用传统的上左右下结构，而使用上下结构。应该把主要的导航链接放在页面顶部，而且应当尽量精简，1或2行较为适宜。如果需要其它次要的导航就放在页面底部，这样用户打开页面后无需滚动就能看到页面的主要内容。不要使用过于复杂的色彩，手机屏幕不一定能正常显示，只要使网站总体风格一致即可。
手机网络往往要比有线链接要慢，例如，中移动GPRS升级EDGE后峰值只有384kbps，而且由于机制所限，手机连接互联网会产生较高的延迟，这些都将导致页面加载时间的延长；使用移动网络需要用户支付的费用通常会比较高，中移动降价后的GPRS流量费仍高达0.01元/KB。（不知升级3G后会是何种情况，呵呵）
在进行页面设计时应注意图片，flash等元素的使用，不要尺寸和字节数过大的图片，这样加快网页加载，不产生不必要的滚动条，降低用户的使用成本。
版本低一点的手机浏览器往往不支持脚本或插件，而且在许多情况下，用户没有选择的浏览器或者升级旧浏览器的余地。像重新载入网页，构建表，处理不必要而且复杂的样式表，处理无效的标记等等这些操作，由于手机的处理能力通常都相当有限，这意味着网页渲染可能需要很长时间才能完成，这将引起明显的延迟，并且浪费更多的电池电量。
1.2 用户输入
手机输入一般都不像使用普通键盘那么方便，而且一般手机都没有像鼠标这样的指点设备，应尽可能让用户少输入内容。例如一个较长的URI，用户没有耐心去输入它，而且也不能保证输入的正确性。
例如：不推荐使用这样的URI
“http://www.example.org/index.html”，
推荐使用这样的
“http://example.org”。
1.3 用户目标
用户通过手机上网浏览所需的网页时，通常都比桌面用户有更具体的目标，他们的意图往往是为了找出直接相关的资料。例如，用户可能需要收发某封重要的电子邮件，找一个距离最近的中国石油的加油站，看看CCTV5今天是否直播火箭队的比赛等等，恰巧手边又没有一台能上网的电脑。
同样，手机用户通常不太关心冗长的文件或内容。手机屏幕是不适合阅读长篇内容，用户往往还是因为没有更方便的接入方法，只得使用手机作为最后的手段。
2. 代码相关
2.1 文件总体结构应遵循以下样式。
xhtml mp使用:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
xhtml basic使用：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>公交搜索</title>
</head>
<body>
</body>
</html>
2.2 去掉不必要的空格和换行
不必要的空格和换行会增大文件大小，去掉空格及换行对浏览器解析来说没有不好的影响，因此推荐在编写完成上传服务器时去掉不必要的内容。
2.3 尽量避免使用Cookie
不是所有的浏览其都支持Cookie，即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL中传递相关信息，当然，要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。
2.4 不要使用<table>标签
<table>在小屏幕上表现不佳，解析难度较大，大多数手机浏览器对<table>都支持不佳。
2.5 图片或其它嵌入对象要添加必要属性
在使用图片或flash等元素时，要添加alt属性，以便在元素不能加载时给用户相应的提示，添加width，height属性，防止发生不可预期的版式破坏，添加id属性以替代name属性。
2.6避免使用绝对度量单位
推荐使用em，ex或者百分比等相对单位替代px，这样便于浏览器对网页的自动缩放。
2.7 把需要共享的样式和脚本通过外部链接引入
推荐把样式和脚本写在文件里通过外部链接引入，这样可以减少解析难度和出错几率。
如果客户端支持缓存就可以不再向服务器发送请求，如果不支持，那么每次都要从服务器取这个文件，不相关的内容也在这个文件里，将额外增加不必要的流量；网页里的每个外部链接都会单独从服务器请求一次，如果内容过于分散，请求次数就会很多。
因此，尽量把可以共享的样式或脚本写在单一的文件里，减少不必要的请求和流量。
分享到：
相关推荐
### 手机页面设计及编写的建议规则 随着移动互联网技术的发展与普及，越来越多的人开始通过智能手机访问网页，这也使得手机页面的设计与编写变得尤为重要。本文将基于提供的内容概述几个关键知识点，帮助开发者更好...
这款“手机程序设计师网页模板”是专为移动应用开发者或设计者打造的一款具有强大CSS3动画效果的网页设计模板。CSS3（Cascading Style Sheets level 3）是CSS技术的最新版本，它极大地扩展了网页设计的可能性，使得...
本毕业设计论文的主题是“手机网上营业厅自助服务系统”。随着信息技术的发展，尤其是互联网技术的普及，越来越多的传统服务行业开始向线上转型，以提高服务效率和服务质量。手机网上营业厅自助服务系统正是在这样的...
4. **响应式设计**：考虑到用户可能使用手机、平板电脑或桌面电脑访问，这个页面很可能采用了响应式设计，以适应不同屏幕尺寸。通过媒体查询（`@media`规则）和灵活的布局方法（如Flexbox或Grid），页面可以自动调整...
6. **响应式设计**：考虑到不同设备的屏幕尺寸，404页面应该采用响应式设计，确保在手机、平板电脑和桌面电脑上都能正常显示。 替换Nginx的404页面模版涉及到服务器配置。在Nginx的配置文件中，找到http、server或...
综上所述，这个"手机wap源码模板 (366).zip" 提供了一个完整的移动Web解决方案，涵盖了设计、布局、内容展示和用户体验等方面。开发者可以基于这个模板快速搭建自己的WAP网站，同时也提供了学习移动Web开发和响应式...
#### 三、页面设计与布局 - **首页设计**: 首页通常是最复杂也是最重要的页面，需要精心设计以吸引访问者的注意力。在本项目中，首页使用了丰富的CSS排版，色彩鲜明有活力，顶部导航及底部区域具有100%宽度的背景色...
- **响应式设计**：考虑到不同设备的屏幕尺寸和用户偏好，页面应具有响应式布局，以适应手机、平板电脑和桌面等多种设备。 - **性能优化**：通过压缩和合并CSS/JS文件，使用CDN（内容分发网络），以及优化图片...
6. 代码规范与可维护性：编写整洁、有组织的代码，遵循一定的命名规则和注释标准，可以提高代码的可读性和可维护性，这对于团队合作尤其重要。 7. 性能优化：减少HTTP请求、压缩文件、使用CDN、图片优化等方法可以...
- **简洁性**：由于早期移动网络带宽限制，WAP页面通常设计得非常简单，只包含最基本的文本信息和少量图片。 - **兼容性**：WAP标准确保了不同品牌和型号的移动设备都能访问这些网站。 - **优化**：为了提高加载速度...
1. **响应式设计**：虽然原文没有明确提到响应式设计，但考虑到现代网页设计的趋势，建议在开发过程中考虑使用响应式布局，使网站能够在不同设备上（如手机、平板电脑、桌面电脑等）都能有良好的显示效果。...
- WAP代表的是**无线应用协议**（Wireless Application Protocol），它是专门为移动设备设计的一种通信协议。 2. **什么是WAP？** - WAP是一种标准化协议，它允许移动设备（如手机和平板电脑）通过移动网络连接...
【CSS模板】是一种用于快速构建网站前端界面的设计框架，它包含了一系列预定义的样式规则，可以帮助开发者节省时间，提高效率，使网站具有统一且美观的视觉效果。在本压缩包"css-template.rar"中，我们可以看到一...
**响应式设计**是一种使网站能够根据用户所使用的设备屏幕大小自动调整布局的设计方法。它通过使用CSS3媒体查询、灵活的网格布局和图片等技术手段，确保网站在不同尺寸的屏幕上都能保持良好的用户体验。 - **CSS3...
4. **CSS技术**：深入研究CSS代码，了解如何编写和组织样式规则，实现布局控制、颜色、透明度以及与其他网页元素的相互作用。 5. **响应式设计**：检查模板是否具备响应式布局，了解如何根据不同的设备屏幕尺寸调整...
Appium作为一个跨平台的测试框架，支持iOS、Android及FirefoxOS等系统，它可以对原生和混合型的移动应用进行自动化测试。在进行移动端自动化测试时，良好的脚本规范至关重要，以下是移动端自动化脚本规范相关知识点...
为动画效果编写相应的CSS规则。 3. **JavaScript交互**：监听`input`事件，获取用户输入，使用Ajax发送请求获取建议数据，并将数据动态渲染到页面上。同时，添加对搜索按钮的点击事件处理，实现即时搜索功能。 4. ...
- **复杂规则处理**：能够处理高度复杂的规则，减少代码编写工作量。 #### 流程分析 H3 BPM10.0的流程分析系统利用ETL（提取、转换、加载）技术收集流程运行数据，并对其进行多维度分析，帮助用户评估现有流程的...
首先，文本编辑功能是表单的核心部分，允许用户输入他们的意见或建议。HTML5提供了`<input>`标签的各种类型，如`type="text"`，用于创建文本输入框，让用户自由输入文字。此外，还可以使用`<textarea>`标签创建多行...