`

手机web页面制作一些注意事项

阅读更多

 

 

原文:

http://hi.baidu.com/onionsmm/item/977b8142e64b9b12886d10ea

一、关于手机页面的标准头

字符编码使用utf-8


指定页面手机内存缓存中的存储时间段

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 

device-width通知浏览器使用设备的宽度作为可视区的宽度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例


解决原先在Pocket PC 2002上能够全萤幕显示的Flash影片(240×320),到了Pocket

PC2003之后,自动会缩小的问题


二、关于css样式

1页面自带css建议style标签头标准化,格式:

id="internalStyle">

2 部分手机浏览器对如下css样式支持不是很好,建议慎重使用:

· 不支持font-family属性,也就是说,在很多浏览器可能只有一种默认字体;

· 不支持font-szie属性,如在UC浏览器你只能看到一样大小的字体;

· 不支持width、height、padding、margin、line-height属性,如,在UC浏览器只

能通过p、br 等HTML标签来换行以达到字符上下间隔;

· 不支持固定像素的宽度,100%显示页面,如:在UC浏览器始终将看到的是“满屏的

”;

· 不支持浮动、层叠布局,float和position属性无效,如:在UC浏览器你只能看到

“左对齐”,建议使用table格局。

· 支持background-color,但不支持background-image,也就是说不支持CSS背景图

显示,在UC浏览器你只 能看到背景色,为了手机的流量,提倡尽量少用背景图。

· max-device-width这样的选项,限定屏幕宽度小于480的设备才采用该样式表,代

码格局如下:

三、其他

1网页大小限制:建议低版本页面不超过15k,高版本页面不超过60k。

2部分手机不支持png8和png24,所以尽量使用jpg和gif的图片;

3另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所

以慎用有平滑渐变的bar设计;

4部分手机对于超大图片,既不进行缩放,也不显示横下滚动条;

5少数手机在打开超过20k的测试页面时,会显示内存不足

6大部分手机不支持表单元素的“disable”属性

7在手持设备上,按钮最好不要直接用img标签


四、浏览器使用情况:

CNNIC与CR-Nielsen联合发布的《2009年中国移动互联网与3G用户调查报告》显示,

手机自带浏览器市场份额高达49.6%,

在现有手机浏览器品牌中,

腾讯手机浏览器份额27.3%,

UC手机浏览器份额11.2%,

Opera手机浏览器份额1.8%,

其他手机浏览器份额2.4%。

尽管今年 UC浏览器扳回一城,重新超越了QQ浏览器,但不排除有随时被对方超越的可

能。

分享到:
评论

相关推荐

    手机网页设计注意事项和解决方法

    手机网页设计注意事项和解决方法 在手机wap网页设计中,开发者需要注意许多问题,以确保手机页面的兼容性和可读性。以下是手机网页设计中需要注意的关键问题和解决方法: 1.基础知识 wap 端的网站表头需要特别...

    使用原型设计工具AxureRP创建一个web页面框架归纳.pdf

    在本文中,我们将探讨如何使用 Axure RP 创建一个 web 页面框架,并介绍原型设计的重要性、Axure RP 的简介、设计准备、设计思路和注意事项。 原型设计的重要性 原型设计是交互设计师与 PD、PM、网站开发工程师沟通...

    web开发—页面小广告

    #### 四、注意事项 1. **兼容性**:不同浏览器对CSS和JavaScript的支持程度不一,需测试多种浏览器以确保良好的兼容性。 2. **用户体验**:避免广告过于侵扰,如过多的动画效果或遮挡主要内容,以免引起用户反感。 3...

    web标准化页面制作规范[参照].pdf

    此外,规范还强调了一些注意事项,例如避免使用冗余的CSS样式,提高样式的复用性,减少代码的重复。按照区域描述编号能帮助开发者更好地组织和定位代码,如`main01_div01_ul01`表示主体区域的第一个子DIV内的第一个...

    Web Service实现天气预报 在线客服实现 循环播放广告 广告位轮换管理页面设计 浏览循环播放广告页面设计

     4个编程注意事项  4个编程完整解决方案 30.1 Web Service实现天气预报 657 30.1.1 Web Service天气预报功能概述 657 30.1.2 介绍Web Service 657 30.1.3 创建一个简单Web Service 658 30.1.4 使用Web ...

    Web前端大作业.zip

    1. **Web大作业.docx**:这是一个文档文件,很可能包含了项目的需求说明、设计思路、技术选型以及注意事项等内容。在开始项目之前,详细阅读这份文档至关重要,它能帮助我们理解项目的整体框架和实现细节。 2. **...

    VS2005入门视频教程 制作第一个页面

    1. "使用须知.htm" - 这可能是教程的使用指南或者注意事项,提供了观看视频和进行练习的一些基本要求和建议,帮助用户更好地学习和理解教程内容。 2. "VS2005入门视频教程--制作第一个页面及启动运行.swf" - 这是一...

    在线web简历制作html5模板

    "readme.md"通常是项目说明文件,里面可能包含了使用模板的指南、许可信息和开发者注意事项等内容。 总的来说,这个在线Web简历制作HTML5模板结合了HTML5的先进技术、Bootstrap的响应式设计和jQuery的交互功能,为...

    设计稿进行页面制作的流程和注意事项

    设计稿进行页面制作的流程和注意事项是Web开发中至关重要的环节,主要目的是将设计师精心制作的设计稿转换成实际的HTML页面。在这个过程中,遵循一定的步骤和最佳实践可以提高效率,确保页面的质量。以下是对这个...

    web网页设计工具

    5. `Readme.txt`:通常包含关于软件的简要说明、更新信息或者使用注意事项。 6. `Serial.txt`:可能包含了软件的序列号或激活码,用于验证软件的合法性。 7. `Ascii.txt`:可能是一份ASCII艺术文本,或者与ASCII编码...

    Web_UI_制作规范.

    6. **注意事项**: - 保持一致性:在整个项目中,应始终遵循相同的命名和组织规则。 - 使用英文:尽管可能会有一些语言障碍,但使用英文可以使项目更便于国际团队协作。 - 避免特殊字符:不使用中划线和下划线来...

    HTML教程(概念,编写方法,注意事项等)

    八、注意事项 1. 保持代码规范,遵循W3C标准。 2. 使用语义化标签,提高可读性和可访问性。 3. 对于外部资源,如图片和链接,确保路径正确。 4. 测试不同浏览器的兼容性,因为不同的浏览器可能对HTML的解析有所不同...

    web前端开发技术储久良第三版答案

    《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点,主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术,通过解决...

    网页抓图工具Web2Pic

    `Readme.txt`通常包含了软件更新信息、注意事项或者其他开发者想要传达给用户的额外信息。 至于`Dll`文件夹,里面可能包含了一些动态链接库文件,这些文件是程序运行所必需的组件,它们提供了一些特定的功能,比如...

    网站截全图工具Web2PicPro

    "Readme.txt"通常包含软件的基本使用说明和注意事项,"License.txt"则是软件的许可协议,用户在使用前应仔细阅读以了解其权利和限制。"help.chm"是帮助文档,提供了详尽的操作指南和常见问题解答,用户在遇到问题时...

    时空WEB服务器 v2.3

    4. `readme.txt`:通常包含软件的使用说明、注意事项等信息。 5. `chinazzz.txt`:可能是作者或软件相关的附加信息,具体内容需查看文件内容。 6. `cgi-bin`:这是一个目录,通常用于存放CGI程序,服务器会在此目录...

    网站页面切图与CSS注意事项

    本文将探讨网站页面切图的类型和CSS编写中的注意事项,以便提高网页开发的效率和质量。 首先,了解Web页面常见的切图类型是非常重要的。网站页面切图通常可以分为以下几种类型:背景(bg)、列表项目的符号(li)、...

    Web前端大作业_企业网站设计与制作——基于html+css+javascript+jquery红色的婚庆网站(18页面)

    - **注意事项**:需注意表单验证,确保数据的有效性和安全性。 7. **二级、三级页面设计**:指在主页面之外的深层页面,通常包含更具体的信息或功能。 - **设计要点**:确保层次分明、逻辑清晰,以便用户能够轻松...

    web版邮件接收发送问题

    4. `软件安装说明.txt`:提供了软件安装的步骤或注意事项。 5. `www.knowsky.com.txt`:可能是一个链接到外部资源或教程的文本文件。 6. `源码下载.txt`:可能包含有关如何获取源代码的信息。 7. `版权说明.txt`:...

    Dreamweaver网页设计与制作100例:用DIV+CSS技术设计的书法主题网站(web前端网页制作课作业)

    #### 三、网页开发过程中的注意事项 - **兼容性问题:** 确保网页能够在不同浏览器上正常显示是非常重要的。在开发过程中,开发者需要测试页面在Chrome、Firefox、Safari等主流浏览器下的显示效果,必要时还需要针对...

Global site tag (gtag.js) - Google Analytics