手机网页设计注意事项和解决方法_02
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)。
相关推荐
手机网页设计注意事项和解决方法 在手机wap网页设计中,开发者需要注意许多问题,以确保手机页面的兼容性和可读性。以下是手机网页设计中需要注意的关键问题和解决方法: 1.基础知识 wap 端的网站表头需要特别...
案例中,王明的角色类似于网页设计师,他为李刚毅(潜在客户)提供解决方案。在网页设计实训中,学生需要扮演类似角色,理解客户需求,提供设计服务。案例中的法律责任问题,如王明的借贷行为,虽与网页设计技术直接...
"README.md"文件通常包含关于模板的详细说明、安装指南和可能的注意事项,对于用户来说是开始使用模板的重要参考资料。 总的来说,"蓝色大气web设计公司响应式官网模板"是一个全面的网页设计方案,集美观、实用和跨...
【压缩包子文件的文件名称列表】中的“readme.md”通常是一个文本文件,包含了关于模板的安装、使用说明和可能的注意事项。另一个文件名与标题一致,可能是模板的主文件或者整个模板项目的打包文件,包含了所有必要...
UniWebView是一款强大的、专门为Unity3D设计的手机内嵌网页浏览解决方案,其4.2.0版本提供了更稳定、高效的性能,让开发者能够轻松地将网页内容嵌入到iOS和Android平台的应用程序中。 一、 UniWebView概述 ...
README.md文件通常是项目说明文档,可能会包含模板的安装指南、使用方法、注意事项等信息,帮助开发者更好地理解和应用这个模板。 总的来说,这个压缩包提供了一个美观且功能齐全的响应式HTML5网站模板,适用于希望...
压缩包内的“README.md”文件通常包含关于模板的安装指南、使用方法以及注意事项等内容,是开发者或使用者理解模板功能和使用步骤的重要参考文档。而“宽屏新闻门户博客响应式网页模板_宽屏 新闻 门户 博客 blog ...
本文将深入探讨这套源码的核心特点、技术应用以及实际操作中的注意事项。 首先,我们要理解“H5”即HTML5,是HTML的最新版本,它引入了许多新特性,如音频视频处理、Canvas绘图、Geolocation定位等,极大地丰富了...
总的来说,"80套完整的经典网页设计模板"为网页设计师和开发者提供了一站式的解决方案,无论你是新手还是专业人士,都能从中找到灵感和实用工具。通过学习和利用这些模板,可以提升网站制作的效率,同时保证设计质量...
综上所述,园艺设计展示响应式网页模板是一个集HTML、CSS和JavaScript于一体的网页设计解决方案,它利用响应式设计技术确保在各种设备上都能提供优质浏览体验。通过这个模板,园艺设计师可以快速创建专业且吸引人的...
总的来说,Amaze UI 模板是一个集成了现代网页设计技术、电商功能和策略规划的全方位解决方案,适合那些希望快速建立专业、有吸引力的企业官网或电商平台的开发者和企业。通过合理利用这款模板,可以显著提高网站...
“readme.md”文件通常是项目或软件包的说明文档,其中可能包含了安装指南、使用方法、注意事项等重要信息,对于正确使用和定制这套模板至关重要。 综上所述,这个压缩包提供的网页模板是一套全面的、适用于房地产...
7. **文件结构**:压缩包中的`README.md`文件可能是介绍模板使用方法或注意事项的文档,遵循Markdown格式,方便阅读和理解。 在搭建网站时,选择这样一个全面的模板,企业可以快速创建出专业且具有吸引力的在线平台...
在压缩包中的“重要.md”和“readme.md”文件,通常包含了关于模板的安装指南、使用说明以及可能的注意事项,这对于初次使用者尤其有价值。它们会帮助你理解如何自定义模板,以及如何将其整合到自己的项目中。 总的...
文件`README.md`通常是项目或模板的说明文档,其中可能包含安装指南、使用方法、注意事项等内容。在使用这个模板时,首先应该阅读这份文档,以了解如何正确地部署和自定义模板,避免遇到不必要的问题。 总的来说,...
标题中的“大气互联网it公司bootstrap模板-黑色 整站 企业 手机 响应式 html5 css3 平面设计 商务 宽屏 咨询 服务”表明这是一款专门为互联网IT公司设计的网站模板,具备现代化的网页设计元素。这款模板采用了...
【欧美风格】欧美风格的网页设计注重简洁、清晰和易用性,通常使用大图、鲜明的色彩对比、简洁的线条和图标,以及良好的响应式布局,以适应不同设备的浏览体验。这个模板应体现了这些特点,适应现代企业对专业且国际...
- `readme.html`:通常包含插件的安装指南、使用方法和注意事项。 - `jQuery之家.url`:可能是链接到jQuery官方文档或资源的快捷方式。 - `img` 文件夹:存储了画廊中使用的图像资源。 - `js` 文件夹:可能包含实现...
"@无法运行说明.txt"可能是用来解释如果软件无法正常运行时的一些常见问题和解决方法,比如系统兼容性、环境配置或者安装步骤错误等问题。 总的来说,"抓取(提取)网页的软件1"提供了一种方便的方式来批量获取网页...
标签“模板”表明这是一个可以被外贸企业直接使用的网页设计模版,用户无需从零开始设计,只需根据自身需求进行定制和配置。 在压缩包的文件列表中,我们看到两个文件:README.md和模板文件本身。README.md通常是一...