一、手机页面的标准头规范

字符编码使用utf-8:指定页面手机内存缓存中的存储时间段

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”属性,部分手机不支持的"button"标签,“input【type=file】"标签,"iframe"标签。少数手机不支持”select“标签。

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

四、浏览器使用情况:

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

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

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

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

UC手机浏览器份额11.2%,

Opera手机浏览器份额1.8%,

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

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

五、手机页面制作心得:

1.手机页面的宽度最好控制在240px以内,因为这样可以在不移动屏幕的情况下进行一系列的操作。

2.无论是普通的手机或者智能机,似乎都不太支持js。类似<a href="javascript:history.back()">和"alert()"都不支持。

3.手机对“<input type="button">”的样式支持不是太好,同样的代码在浏览器上和手机上有一定的宽度差距,在给定宽度的情况下。所以我的建议是能不用按 钮,就不用按钮,可以用文字的超链接形式代替, 或者也可以考虑使用小图标。

4.列表页面最好用table,不要用ul li,或者p+空格,一方面是排版,一方面是如果某一列的元素过长,可以使用“table tr td{word-break:break-all;}”,而另外两种方案只能截取字符串了。

5.大图片的存在还是有一定的必要,比如说像导航图,会给人一种炫丽的感觉,但是图片也不能过大,一定要控制在10K以内。

文章来自:http://www.cnblogs.com/summers/p/3328214.html

【转】手机web页面制作时的注意事项的更多相关文章

  1. 手机web页面制作时的注意事项

    一.手机页面的标准头规范 字符编码使用utf-:指定页面手机内存缓存中的存储时间段 device-width:通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 ...

  2. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  3. [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  4. 手机web页面开发-第一弹

    毕业设计题目<基于three.js的太阳系全景漫游>,项目开发运行在手机端,开始学习手机端页面开发. 新建index.html,写meta标签.meta标签分为两大部分:http标题信息( ...

  5. Web页面制作之开发调试工具

    直击现场 <HTML开发MacOSApp教程>  http://pan.baidu.com/s/1jG1Q58M 开发工具介绍 开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE) ...

  6. 手机web页面调用手机QQ实现在线聊天的效果

    html代码如下: <a href="javascript:;" onclick="chatQQ()">QQ咨询</a> js代码如下: ...

  7. 用XPath定位Web页面元素时,如何快速验证XPath语句是否正确?

    在使用Selenium做Web UI自动化测试的过程中,XPath是一种定位页面元素的常用方式.然而,面对某些元素的XPath路径过于复杂,我们想快速验证拼凑的Xpath语句是否正确时,该怎么办呢?这 ...

  8. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  9. html5手机web页面底部菜单

    一.效果图 二.HTML代码 <header class="text-center">TOP</header> <div id="conte ...

随机推荐

  1. python主要探索函数

    在数据分析中,Python的主要探索函数 Python中主要用于书探索的是pandas(数据分析)和matplotlib(数据可视化).其中pandas提供了大量的数据探索的工具与数据相关的函数,这些 ...

  2. Python Numpy 矩阵级基本操作(2)

    1.开方与求e指数 import numpy as np from numpy.matlib import randn print "Test sqrt and exp" arr ...

  3. Python文章导航

    1.Python+Eclipse安装.配置: http://www.cnblogs.com/rhyswang/p/8087752.html 2.数学运算及math库: http://www.cnblo ...

  4. qcom_IMS_conference_call小结

    1conference call建立 用QXDM抓qcom log: 1.拨号盘*#*#825364#*#*    ,  进入抓log UI 2.Connectivity-->USB Port ...

  5. docker内的应用访问宿主机上的mysql和Redis

    背景:宿主机部署MySQL.Redis,docker内部署tomcat.jdk 需求:tomcat内的应用访问宿主机的MySQL和Redis 方法:     一.连接地址切记不能用localhost和 ...

  6. Vue手把手教你撸一个 beforeEnter 钩子函数

    地址 :https://www.jb51.net/article/138821.htm 地址 :https://www.jb51.net/article/108964.htm

  7. 关于shell脚本中的别名问题

    在shell脚本中,shell中的alias别名是不会起作用的,在脚本中的命令都是按着环境变量PATH直接找到命令文件而执行的,所以就不用担心脚本里的命令会与shell中的个性别名冲突啦~

  8. 不用 PS 和 AI,5个网站能做出更好看的设计

    要完成漂亮的设计,一定要掌握 PS.AI.Sketch 等专业的做图工具才可以.其实,现在有很多网站可以帮助不会专业设计工具的我们,做出很多很漂亮的设计,完成自己的设计需求.今天,我们就来介绍一下这些 ...

  9. react使用总结

    1.拿到页面首先需要设计好,每个组件该怎么实现,划分好组件可以减少重复代码,有的时候需要和后端确认才能形成正确的划分 2.页面上的需要展示的数据都是由后端数据而来,所以任何增删改查的数据都要从后端重新 ...

  10. 2018-8-10-win10-uwp-json

    title author date CreateTime categories win10 uwp json lindexi 2018-08-10 19:16:53 +0800 2018-2-13 1 ...