手机WebAPP设计注意事项和解决方法(2)

2014-12-12 13:07:43来源:网络转载作者:
1. Iphone手机网页设计1.1 设置viewpoint,固定显示页面
1. Iphone手机网页设计1.1 设置viewpoint,固定显示页面 当我们在Safari中打开一个网站时,默认情况下会缩放显示网页,而这会影响Web App的体验,所以通过以下代码来关闭缩放: <meta name = “viewport” content = “user-scalable=no, width=device-width”> \
 
属性的介绍: user-scalable – 用户是否可以手动缩放;
width – 定义viewport宽度(默认为980像素) ,例子中值为device-width是指设置为设备显示宽度;
height – viewport的高度;
initial-scale – 初始的缩放比例 (范围从 0 到10);
minimum-scale – 允许用户缩放到的最小比例;
maximum-scale – 允许用户缩放到的最大比例;
1.2 允许网页宽度自动调整 "自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行 viewport 元标签。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport 是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的 100%。 所有主流浏览器都支持这个设置,包括 IE9。对于那些老式浏览器(主要是 IE6、7、8),需要使用css3-mediaqueries.js。 1.3  不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS 代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度: width: xx%; 或者 width:auto; 1.4 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。 body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的代码指定,字体大小是页面默认大小的 100%,即 16 像素。 h1 { font-size: 1.5em; } 然后,h1的大小是默认大小的1.5倍,即 24 像素(24/16=1.5)。 small { font-size: 0.875em; } small 元素的大小是默认大小的0.875倍,即 14 像素(14/16=0.875)。 1.5 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。 .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } float 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。 另外,绝对定位(position: absolute)的使用,也要非常小心。 1.6 选择加载 CSS "自适应网页设计"的核心,就是 CSS3 引入的 Media Query 模块。 它的意思就是,自动探测屏幕宽度,然后加载相应的 CSS 文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> 上面的代码意思是,如果屏幕宽度小于 400 像素(max-device-width: 400px),就加载 tinyScreen.css 文件。 <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 如果屏幕宽度在 400 像素到 600 像素之间,则加载 smallScreen.css 文件。 除了用 html 标签加载 CSS 文件,还可以在现有 CSS 文件中加载。 @import url ("tinyScreen.css") screen and (max-device-width: 400px); 1.7 CSS 的@media 规则 同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。 @media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } 上面的代码意思是,如果屏幕宽度小于 400 像素,则 column 块取消浮动(float:none)、宽度自动调节(width:auto),sidebar 块不显示(display:none)。 1.8 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。 这只要一行 CSS 代码: img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成: img, object { max-width: 100%;} 老版本的 IE 不支持 max-width,所以只好写成: img { width: 100%; } 此外,windows 平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用 IE 的专有命令: img { -ms-interpolation-mode: bicubic; } 或者,Ethan Marcotte 的 imgSizer.js。 addLoadEvent (function () { var imgs = document.getElementById ("content") .getElementsByTagName ("img"); imgSizer.collate (imgs); }); 不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现 2. 小屏幕移动设备网页设计的相关补充: 1.1 网站头(header) 考虑到小屏幕移动设备的一些特性,设计网页时,有些可以去掉网站头(包括LOGO、全局导航什么的)。 比如flick的查看大图页面就去掉了网站头。 设计原则:“针对于小屏幕移动设备的界面设计,在某些指定任务的界面,应优先于让用户关注当前任务,而不是应用程序本身。” 2.1 链接聚焦(hover) 各个浏览器均自定义了链接的hover样式,比如有的浏览器给链接聚焦时加了边框,有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。 2.2 鼠标事件(mouseover) 考虑到触摸屏操作,用户无法用手指进行over的操作,因此应禁止在应用于移动设备访问的网页使用mouseover。 3. UC浏览器相关(由于UC升级频繁 以下不支持的说法仅限于UC7.6以下版本) UC浏览器相对于其他手机浏览器而言,对HTML标签和CSS属性存在有特殊的、自定义的处理方式。 在实际开发中,我们发现了UC浏览器对CSS存在一些“特殊照顾”: 不支持font-family属性,也就是说,在UC浏览器你只能看到一种字体; 不支持font-szie属性,也就是说,在UC浏览器你只能看到一样大小的字体; 不支持width、height、padding、margin、line-height属性,也就是说,在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔; 不支持固定像素的宽度,100%显示页面,也就是说,在UC浏览器始终将看到的是“满屏的”; 不支持浮动、层叠布局,float和position属性无效,也就是说,在UC浏览器你只能看到“左对齐”。 支持background-color,但不支持background-image,也就是说不支持CSS背景图显示,在UC浏览器你只能看到背景色。 4. XHTML手机支持相关 5.1 大多数手机不支持的: 表单元素的“disable”属性  部分手机不支持的: “button”标签  “input[type=file]“标签  “iframe”标签。  虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。 少数手机不支持的: “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。  CSS部分 4.1 大部分手机不支持的: “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;  “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;  “font-style: italic;”:同上;  “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;  “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;  “background-position”属性:但背景图片的其他属性设定是支持的;  “position”属性;  “overflow”属性;  “display”属性;  “min-height”和”min-weidth”属性;  4.2 部分手机不支持的: “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;  “pading”属性  “margin”属性:更高比例的手机不支持”margin”的负值。  4.3 少数手机不支持的: 少数手机对CSS完全不支持; 5. 个人曾遇到的问题解决方案 手机网页设计怎么控制在不同的手机上显示的字体大小自动变化?
  • 允许网页宽度自动调整:
首先,在网页代码的头部,加入一行viewport元标签。 <meta name="viewport"content="width=device-width, initial-scale=1"/> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
  • 不使用绝对宽度:只能指定百分比宽度:width: xx%;
  • 相对大小的字体:字体也不能使用绝对大小(px),而只能使用相对大小(em)。
关键词:WebAPP

赞助商链接: