手机浏览器页面知识收集

  wap手机网页css(wap css)
  大部分手机现在都支持XHTML浏览器,这意味着我们只需在stylesheets的类型设置成“handheld”即

1 * {
2
3 position: static !important;
4
5 float: none !important;
6 }

  因为现行的手机的屏幕限制,没有太多的空间去漂移,故提倡用静态布局和尽量少的用float(ucweb6.0目前还不支持float)
  为了手机的流量,提倡尽量少用背景图background: none !important;
  另外,有背景色的白字在部分手机上也是不支持的,故少用此效果(ucweb6.0目前也不支持)
  解决Pocket PC 2003的Pocket IE内自动缩小
  Pocket IE到了Pocket PC 2003之后,读取页面的速度提升不少,终于到了实用阶段。新版的Pocket IE对于超过萤幕宽度的图形也会自动缩小,避免横向卷轴的出现。
  自动缩图的功能很不错,但是却没有提供关闭的功能,造成原先在Pocket PC 2002上能够全萤幕显示的Flash影片(240×320),到了Pocket PC2003之后,自动会缩小。这个问题现在有解了,只要在html页面上加上〈meta name="MobileOptimized" content="240"〉就可以了。
  XHTML MP 常用的 Meta 信息
  你可以用 标签为你的 XHTML MP 文件指定一些常用的 meta 信息. 标签应当被包含在 标签之间. WAP 浏览器会忽略它不能理解的 meta 信息. 你可以在一个 XHTML MP 文件中指定任何种类的 meta 信息而不影响页面的显示效果.
  例如, 你或许想在你的 XHTML MP 文件中加入作者的名字而不在屏幕上显示它.

〈meta name="author" content="linlin"/〉

  XHTML MP 的缓存控制
  标签的用途之一是控制缓存中一个 XHTML MP 文件的过期时间. 缓存是无线设备中的一些内存空间, 这些空间临时存储着从服务器上下载下来的 XHTML MP 文件. 如果 WAP 浏览器发现所请求的某个 XHTML MP 文件位于缓存中并且还没有过期, WAP 浏览器将显示缓存中的文件以最小化加载延迟. 如果你的 XHTML MP 页面有对时间敏感的内容, 如财务数据, 你或许想把过期时间设置为一个较小的值甚至为 0, 以不至于使用户稍后看到过期的 XHTML MP 页面. 下面的 XHTML MP 例子展示了如何用 标签将一个 XHTML MP 页面的过期日期设置为 0.

〈meta http-equiv="Cache-Control" content="no-cache"/〉

或者是〈meta http-equiv="Cache-Control" content="max-age=0"/〉

将一个 XHTML MP 文件的过期日期设置为 300 秒

〈meta http-equiv="Cache-Control" content="max-age=300"/〉

  XHTML MP 中的间歇性刷新
  在 XHTML MP 中, HTTP 刷新可用于通知 WAP 浏览器间歇性刷新当前页. 对于提供实时信息的移动互联网浏览应用来说, 这是一个非常有用的功能. 在下面的 XHTML MP 代码中, 页面每 15 秒钟自动被刷新一次. 要注意的是这个 XHTML MP 例子中需要 . 如果上述代码没被包含, WAP 浏览器将仅仅显示缓存中的文档的复本, 而不需要每次刷新都连接服务器.

〈meta http-equiv="Cache-Control" content="no-cache"/〉
〈meta http-equiv="refresh" content="15"/〉

HTTP 刷新可用于通知 WAP 浏览器在一定时间后去另一个 URL. 你可以利用此特征把用户重定向到另一个 XHTML MP 页面或者创建一个幻灯片,如下例子15 秒钟后把用户重定向到 "hello_world_example1.xhtml".

〈meta http-equiv="refresh" content="15;URL=hello_world_example1.xhtml"/〉

  但注意, 某些 WAP 浏览器是不支持 HTTP 刷新的.
  例外,几个有用的meta信息

〈meta id="viewport" name="viewport" content="width=240; user-scalable=0;" /〉
〈meta http-equiv="Content-Type" content="text/html; charset=utf-8" /〉
〈meta name="MobileOptimized" content="240" /〉

  viewport的meta标签
  网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。

〈meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"〉

  其中:
  width - viewport的宽度 height - viewport的高度
  initial-scale - 初始的缩放比例
  minimum-scale - 允许用户缩放到的最小比例
  maximum-scale - 允许用户缩放到的最大比例
  user-scalable - 用户是否可以手动缩放
  这个标签主要是用来控制搜索引擎抓取网站的频率,告诉搜索引擎多长时间来网站抓取一次。假如我设置,那这样搜索引擎就是7天来一次。使用这个标签的网站,通常是因为网站数据量非常大,被搜索引擎过于频繁的抓取,会占用过大的资源,影响网站的访问。所以,希望搜索引擎不要天天过来,抓取过一次了,那么等7天后再来。一般的网站是不需要这个标签的。
  wap2.0手机网页的语言 XHTML MP 文档的典型结构

 1 〈?xml version="1.0"?〉
 2 〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉
 3 〈html xmlns="http://www.w3.org/1999/xhtml"〉
 4 〈head〉
 5 〈title>第一个手机页面例子〈/title〉
 6 〈/head〉
 7
 8 〈body〉
 9 〈p〉你好. 欢迎来第一个手机页面例子.〈/p〉
10 〈/body〉
11 〈/html〉

  XHTML MP 以序言 (prolog) 开头, 该序言中含有 XML 声明和 DOCTYPE 声明.
  该序言组件并非 XHTML MP 的元素, 因此不应该把它关闭, 也就是, 你不应该给它们加结束标签或用 /〉 结束它们.
  文档的其余部分, 除了 HTML 中的 〈html〉 标签不应该有 xmlns 属性外, 与普通的 HTML 文档相同.
  XHTML MP 必须包含 〈html〉,〈head〉, 〈title〉, 和 〈body〉 元素.
  XML 声明与字符编码格式:
  所有 XHTML MP 都是 XML 文档. 因此, 文档的开始总会有 XML 声明. XML 声明指定了文档的 XML 版本. 文档的字符编码也可以在这里指定, 像这样:

〈?xml version="1.0" encoding="UTF-8"?〉

  上面一行表述了 XHTML MP 文档的 XML 版本为 1.0, 字符编码格式为 UTF-8. 如果 XHTML MP 文档的编码格式为 UTF-8 或 UTF-16, encoding 属性可以省略.
  在XHTML MP 中, XML 声明并非必需的组件. 然而, 如果 XML 声明被省略的话, 将会导致一些 WAP 浏览器出问题. 例如, 一些 Sony Ericsson 的 WAP 浏览器, 当接收到的 MIME 类型为 text/html 时, 会利用 XML 声明来区分 XHTML MP 和 IHTML (一个 NTT DoCoMo 定义的有专利的标记语言) 文档: 如果文档包含 XML 声明, 它就是一个 XHTML MP 文档, 否则它就是一个 IHTML 文档.
  DOCTYPE 声明:
  所有 XHTML MP 文档都必须有 DOCTYPE 声明. 该声明应该放在 XML 声明与 元素之间. 下面是 XHTML MP 的 DOCTYPE 声明. 你可以直接将其复制并粘贴到你的 XHTML MP 中.

  〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉

  DOCTYPE 指定了 DTD (文档类型定义) 的名字 和链接到 DTD 的 URL. DTD 包含了关于标记语言的语法信息. 它定义了什么元素和属性可以在标记中使用和使用它们的规则. 验证工具, 通过把你的 XHTML MP 文档与 DOCTYPE 声明中指定的 DTD 进行比较, 可用于检查你的 XHTML MP 文档是否遵守了 XHTML MP 语言的规则. 一些 IDE 集成了类似的审核工具.
  〈body〉 元素:
  〈body〉 元素用于实际内容的容器. 一个 XHTML MP 文件只能包含一个 〈body〉 元素, 文本不可直接被包含在 〈body〉〈/body〉 标签对中. 例如, 下面的标记代码在 XHTML MP 中是不正确的:
  〈body〉 你好. 〈/body〉
  要纠正上面的 XHTML MP 标记代码, 文档 body 中的文本必须被包含在其它元素, 如段落 (〈p〉〈/p〉), 列表 (〈ul〉〈li〉〈/li〉〈/ul〉 或 〈ol〉〈li〉〈/li〉〈/ol〉), 标题 (〈h1〉〈/h1〉, 〈h2〉〈/h2〉...), 等等, 之间. 下面的标记代码在 XHTML MP 中是正确的:
  〈body〉〈p〉你好.〈/p〉〈/body〉
  手机网页编码需要遵循什么规范?
  遵循XHTML Mobile Profile规范,简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。
  网页文档推荐使用扩展名?
  推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
  为什么现今大多数的网站一行字数上限为14个中文字符?
  由于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。
  使用WCSS还是CSS?
  WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap- input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。
  避免空值属性
  如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。
  网页大小限制
  建议低版本页面不超过15k,高版本页面不超过60k。

时间: 2024-10-16 14:03:21

手机浏览器页面知识收集的相关文章

web页面手机浏览器qq浏览器自带分享和微信浏览器自带分享的总结

我们公司有ios原生和安卓原生的app,后面新加H5的手机浏览器页面,页面需要分享.公司参照京东分享模式进行开发.本来想用h5和js一起写分享,后面发现每个浏览器都自带分享按钮,所以就用浏览器自带的分享按钮. 1.首先,qq浏览器是最简单,但是百度上最没有文档.qq浏览器打开页面,按分享按钮可以分享到qq好友.qq空间.朋友圈和微信好友,四种方式.但是分享必须自带自家产品的图片和标题,所以进行代码设置:如图: 设置这三者就可以把你想要的描述,标题和图片带过去.我是动态改变meta的内容的.(网上

基于图像识别测试手机浏览器打开网页首屏时间的方法

本文涉及性能测试技术,特别是涉及一种基于图像识别的测试手机网页首屏时间的方法,它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中.同时可以应用到其他android的apk的响应时间的测试中去 随着智能手机等移动终端的发展,越来越多的用户开始通过手机等设备浏览网页,以获取用户所需的信息. 用户使用手机访问网站是基于手机浏览器所获取的网页实现的.通常情况下,用户访问网站的页面全部加载完毕时,总页面高度可能有一屏到多屏不等,总的页面加载时间要比首屏加载时间长很多,但是首屏加载时间是用户对

手机浏览器跳转微信指定页面 及 跳转微信公众号一键关注

这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流浏览器都支持,app加个浏览器功能就可以使用weixin:// .用途不大,只能打开微信,不能携带任何参数. 方法二:weixin://profile/XXXXXXXXX 此链接接口微信已经停用. 目前仅仅等同于weixin://,所以不要浪费精力学习了. 方法三:weixin://dl/business/?ticket= 如招商银行的一键关注. 此

用PC浏览器模拟手机浏览器(一):无扩展版

想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了,相信你也不用他浏览手机站点,否侧太没品位了,那咱今天就说说其他的:Chrome和Safari两个浏览器,在无任何扩展的情况下怎么来模拟手机浏览器. 其实,还是如前言里说的,就是修改浏览器的User Agent,来让那些以User Agent为判断标准的站点认为你当前的浏览器为手机浏览器,从而呈现手机

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

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

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1.最常用WEB页面J

手机浏览器调试建议

使用电脑远程调试安卓手机上浏览器的JS (2014-01-14 22:44:04) 转载▼     有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法. 1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件 1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上): 2)安装了安卓的SDK: 3)手机上也安装谷歌浏览器(Chrome for

在PC上测试移动端网站和模拟手机浏览器的5大方法

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

微信jsApI及微信分享对应在手机浏览器的调用总结。

摘录自别人的博客: 第一篇:微信内置浏览器的JsAPI(WeixinJSBridge续) 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的response.后来重新调研了下,整理出来了