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

news/2024/12/3 1:50:38/
一、手机页面的标准头规范字符编码使用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以内。

 

转载于:https://www.cnblogs.com/qhorse/p/4835227.html


http://www.ppmy.cn/news/544055.html

相关文章

微软的苹果香味——专访微软MacBU组成员

这是一只游走于微软和苹果两家公司、两大产品平台之间的特殊团队&#xff0c;与使用PC和Windows Phone的微软人不同&#xff0c;他们日常使用的是Mac电脑和iPhone手机&#xff0c;还时不时要向不理解“为什么要为苹果开发应用软件”的同事解释原因。在微软内部&#xff0c;他们…

2021十大关键显示科技趋势

来源&#xff1a;国际信息显示学会SID 排版&#xff1a;珊妮 作者&#xff1a;Sri Peruvemba&#xff0c;CEO&#xff0c;Marketer International Inc. 翻译&#xff1a;SID China 2021年显示技术正在发生巨变&#xff0c;随着我们进入未来十年&#xff0c;我们将拥有更加智能、…

【浏览器】1022- 47 张图带你走进浏览器的世界!

大家好&#xff0c;我是零一&#xff0c;每个开发者&#xff08;尤其是前端工程师&#xff09;或多或少会跟浏览器打交道&#xff0c;那么你们有没有想过去深入了解浏览器呢&#xff1f;无论是因为好奇还是为了面试&#xff0c;相信你们一定在网上搜过不少关于浏览器相关的知识…

墨水屏的“硬伤”与福气

近日&#xff0c;华为在新品发布会上出了一款墨水屏平板MatePad Paper&#xff0c;在同类产品中&#xff0c;其特征与性能表现都在前列&#xff0c;引得很多爱书消费者的青睐。墨水屏在平板的应用&#xff0c;对于平板市场来说&#xff0c;可能掀不起什么大的水花与变革&#x…

【王俊杰de人工智能实战课】 第1次作业

Brief Guide 项目内容这个作业属于哪个课程北航人工智能实战课这个作业的要求在哪里第一次作业要求我在这个课程的目标是获得机器学习相关的完整项目与学习经验&#xff1b;通过与人工智能行业的大牛们聊天了解行业不同方向的发展以便进行职业规划&#xff1b;为转CS积累基础知…

新手产品经理如何写竞品/市场分析报告

1. 为什么要去做&#xff08;why&#xff09; 2. 什么时候去做&#xff1f;&#xff08;when&#xff09; 3. 做竞品分析的基本步骤&#xff08;how&#xff09; 3.1. 明确目的 3.2. 行业分析&#xff08;市场分析&#xff09; 3.2.1. PEST 3.2.2. 竞争态势 3.2.3. 产业…

【转】手机web页面制作时的注意事项

一、手机页面的标准头规范 字符编码使用utf-8&#xff1a;指定页面手机内存缓存中的存储时间段 device-width&#xff1a;通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到…

拿下国产高端市场第一背后,vivo与苹果、华为的共性

出品 | 何玺 排版 | 叶媛 国内高端手机市场格局生变 据数据机构Counterpoint在8月24日公布的第二季度中国高端智能手机市场报告&#xff0c;vivo在刚刚过去的第二季度中表现抢眼&#xff0c;获得了13%的市场份额&#xff0c;成为仅次于苹果的高端手机品牌厂商。 01 国内高端…