当前位置:首页 » 网页前端 » 手机web页怎么兼容所有的屏幕
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

手机web页怎么兼容所有的屏幕

发布时间: 2023-01-08 22:42:52

⑴ 手机web页制作怎么兼容所有屏幕

一、目前主流手机屏幕宽度列表:
128、176、240、320、360、480、640几种
二、研究对象:
诺基亚、三星、索爱、摩托罗拉、黑莓、联想、天语、苹果
三、各品牌各屏幕宽度所占比例:

四、结论:
由以上表格可以结论:
1. 主市场上主流手机屏幕宽为240px,在总体市场上占59%,不必多说,此中手机一定是我们的主要客户来源。
2. 以屏幕宽度为480px的手机为发展趋势,在总体市场占9.3%,虽然该种机型占市场份额不大,但是各大品牌都有所涉及,而且只会出现有增无减的趋势,将来一定会取代屏幕宽为240px的主导地位。
3. 屏幕宽度为320px、360px的手机是发展大屏手机时期的过度型号,在总体市场上屏幕为360px的手机所占份额明显高于320px的。
4. 屏幕宽度为128px的手机占市场9.9%,一般为早期机型,大多不支持wap2.0页面。
5. 屏幕宽度为640px的超大屏幕手机占市场份额为1.7%左右,一般为多媒体和高端机,而且根据市场行情,大屏幕手机越来越受到用户的喜爱,所以在不久的将来,该类型的机型一定会占有一席之地。

五、建议:
1.舍弃屏宽为128px和176px的手机,wap北京网站制作可以覆盖83.3%的市场。原因:此种用户普遍收入偏低,不大可能成为服务对象。
2.鉴于市场上手机屏宽设定没有统一的标准,手机屏幕各式各样,手机屏幕宽度差距较大,为了防止大屏幕手机用户上页面显示严重变形,建议做成以240px为标准向上兼容320px或者以360px为标准向上兼容。

二、wap1.0和wap2.0区别
限制是手机本身的问题,每个手机的图片 铃声,java程序等文件的大小都有不同的限制,和wap版本无关。
wap 应用版本在手机上1.0 和2.0区别主要是应用功能的兼容,1.0因为有许多局限,现在几乎所有的手机都是wap2.0浏览器,如果是1.0浏览器,会有许多wap功能无法使用。下载文件限制主要取决于手机本身,版本的问题主要会体现在----用低版本浏览器浏览高版本wap高端网站建设会有部分功能无法实现。wap2.0好像还没有解决完全向下兼容的的问题。
WAP1.0版本是WAP的第一个版本,在1998年夏被通过。这一版本推介出了WAP的核心内容、i.e.WAP协议条款、WML以及WMLScript等
WAP1.1版本于1999年夏推出,这是1.0版本的改良版,是对以前的版本进行归纳反馈的结果。1.1版是第一个商业版,在这一版本中的主要变化仍然是用XHTML对WML进行编排以得出W3C的详细说明。这一版本支持WBMP格式的图像操作,从而提高了无线电话应用(WTA)-规格及WML的所有标记,现在它已用小写取代了大写。
WAP1.2版本现已被通过,这一版本采用了WAP推进架构、用户代理结构(UAPROF)、WDP通道、提高无线电话应用(WTA)规格以及包括支持附加的用户网络技术。
现在最新的就是wap2.0
WAP2.0是为加强WAP的实用性而设计的,迎合了市场的需求,并且适应了当前更高带宽、更快的数据传输速度、更强大的接入能力和不同的屏规格大小等最新的行业发展趋势。利用先进的网络和新增的服务功能,支持WAP2.0的终端将可以接入到各种基于互联网的内容、应用和服务,我们也可以将这视为从PC非常有价值的一个扩展。
WAP2.0采用与互联网采用完全通用的协议,可通过手机直接登录互联网,而基于WAP1.2技术却只能登录WAP门户。同时WAP2.0特有的直接HTTP通信、移动友好技术、标记语言XHTMLMP以及对WML1.0的完全向后兼容等技术也使得WAP2.0能有更好的图形展现及控制能力;更容易针对不同的终端作出相应的内容优化;能够无线传送流媒体;使用缓存,业务处理速度更快;对大型文件的下载也更加迅速。WAP2.0将真正实现手机与互联网的无缝连接,使手机成为一台微型电脑终端。
WAP2.0中采用了各种新技术以增强业务性能,其中包括:数据同步、多媒体消息服务(MMS)、永久存储接口、预配置(Provisioning)、和图形符号传送(Pictograms)等。另外、WAP2.0还在以前版本的基础上对无线电话应用(WTA)、Push、和用户代理轮廓(UAPROF)作了进一步完善。
对于数据同步,WAP2.0采用了SyncML协议以保证为多种设备提供一个通用解决框架。无线会话协议WSP和HTTP/1.1协议均可支持SyncML语言。
永久存储接口提供了一组存储服务及完整定义的接口,允许用户在无线设备或者其它已连接的内存设备上组织、访问、存储、提取数据。
预配置(Provisioning)特性允许网络操作员利用一个通用工具包管理其网络上的设备。同时该服务提供一个标准的方法为WAP客户提供其在无线网络中操作所需的信息(比如WAP网关的IP地址等等)。
图形符号传送(Pictograms)特性允许用户使用微型图形 (tiny images),例如。这样的图形可以用于更简洁地表达意思,使用户能够更有效地进行通信
除了如WBMP图像,vCard和vCalender。这些WAP1.2中已经规范的内容。在WAP2.0中的,还增加了一些新的特性: WAP2.0中使用的基本标记语言为WML2,是基于W3C定义的XHTML的基本轮廓编写的。WAE通过定义了用于增强功能的附加标记特征,及对WML1语言的前向兼容,进一步提高了该语言的可扩展性。WML2使用了XHTML的模块化方式,允许按照需要增加语言元素。而且,使用XHTML核心基本语言编写的文档,完全可以在WML2浏览器中运行。 WAP2.0中还支持style sheet加强了内容显示能力。WAP同时支持目前绝大多数Internet浏览器都支持的inline and external style sheets。 WAP2.0版本包括一个使用eXtensible Stylesheet Language Transformation (XSLT)的转换机制,可以允许将WML1语言的文档转换成为WML2编码,这样就可以在WML2浏览器中运行WML1的文档了。 这些变化使客户可以访问为其他Internet客户和应用编写的XHTML内容,同时也可以访问使用扩展WML特性而特殊编写的内容

⑵ 移动端Web页面适配方案(整理版)

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发,由于手机 屏幕尺寸 分辨率 不同,或者需要考虑 横竖屏 问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ,通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备,即 <meta name = 'applicable-device' content = 'mobile'> ,在 <meta> 标签中的 viewport 标签中设置 width ,通过 js 动态修改标签的 initial-scale 使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。

后面出现 流式布局 ,使用百分比 % 定义宽度,高度使用 px 固定,根据可视区域大小实时进行尺寸调整,通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单,但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形,字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题,出现了 弹性布局 。这种布局方案下,包裹文字的元素的尺寸采用 em/rem 为单位,页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ,页面的主要划分区域使用 px 和百分比,包裹文字的元素和文字采用 em 。

上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于 响应式web设计 ,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。

[TOC]

像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样,是因为像素点的个数相同情况下,不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字,在 1366×768 显示屏下会显示的小,在 1024×768 显示屏下会相对大。也称为 物理像素(设备像素 ),是分辨率的尺寸单位。

印刷行业常用单位,能够使用测量设备测得的长度,等于 1/72 英寸。

在不同屏幕上, css 像素呈现的物理尺寸一致,但 css 像素对应的物理像素具数不同。标准的显示密度下, 1 个 css 像素对应一个物理像素,缩放时, 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度,每英寸所拥有的像素数。值越高,显示画面细节越丰富。计算公式为: ,其中 和 是分辨率的宽高, 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个,值越高,图片越细腻。

设备物理像素和设备独立像素比 ,即 是指在理想布局宽度,使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取,css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息,通过设置 <meta name = "viewport"> ,提供有关 视口初始大小 的信息,供 移动设备 使用。属性值为

移动端涉及 布局视口 (Layout Viewport)、 视觉视口 (Visual ViewPort)和 理想视口 (Ideal ViewPort)。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的,屏幕每行的像素 * 每列的像素点数,单位是 px 。

设备独立的,软件可以达到的,个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ,如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素,如果在普通屏中其设备像素等于 css 像素,但在一些高清屏中,如 Retina 显示屏,一个css像素对应 2 或 3 个设备像素,这时显示出来的元素会变小。为了让元素如期待显示,需要传入 原始设计稿尺寸 × 倍率 的设计稿,根据 DPR 的定义,这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域,移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位,包括 文本 布局高宽 间距 等,使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准,转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 多个屏幕 ,让网站的布局和功能随用户的使用环境(屏幕大小、输出方式、设备/浏览器能力而变化),使其视觉合理,交互方式符合习惯。如使得内容区块可伸缩与自由排布,边距适应页面尺寸,图片适应比例变化,能够自动隐藏/部分显示内容,能自动折叠导航和菜单。

⑶ 在手机上如何设置兼容性视图

在图库里面即可设置。

兼容性视图是微软为了兼容基于其它网页标准开发的网站,确保广大互联网用户在浏览网页时不至于受困于网页显示混乱的问题,而专门为IE8增加的一项实用功能。当IE8检测到某网站不兼容时,地址栏右侧就会出现兼容性视图按钮,只需轻轻一点,大部分网页显示就会正常了。IE9及以上版本也有这个功能。

单击菜单“工具→兼容性视图设置”,在打开的窗口中勾选“在兼容性视图中显示所有网站”选项,保存设置即可。您也可以选在“在兼容性视图中显示 Intranet 站点”,然后将某些不兼容IE的网站添加到该列表,以后访问这些网站的时候,便可自动启用“兼容性视图”。

如果使用的是360,猎豹等浏览器,就会发现和IE不一样,工具栏上没有"兼容性视图"的按钮,这时大家可以按F12键,在弹出的“开发人员工具”中选择兼容性视图。

⑷ 手机web版的页面(html/css)怎么兼容所有浏览器和各个手机屏幕分辨率

你说的这个问题,应该算的上是手机适配的问题!

既然是手机web端页面,这里的尺寸应该指的是浏览器的可视区域!

同样是5寸屏,一些有问题一些木有问题。

那他们的不同点就在于浏览器的可视区域不一样。

针对这类极小部分的适配问题。可以通过。css适配做出适当调整:

//手机浏览器是这个最大区域(可视区域375px)时,应用这个里面的样式
@mediascreenand(max-height:375px)
{

}
//手机浏览器是这个最小区域(可视区域375px)时,应用这个里面的样式
@mediascreenand(mim-height:375px)
{

}
//手机浏览器是这个最大区域(可视区域375px)介于345-75时,应用这个里面的样式
@mediascreenand(mim-height:375px)and(mim-height:775px)
{

}

具体你可以参考这个:

http://www.ibm.com/developerworks/cn/web/wa-cssqueries/

⑸ 手机web页制作怎么兼容所有屏幕

INTVAL2 不变。 hh.i = 10;

⑹ 如何实现webview 上网页能进行自动适应手机屏幕大小

stackoverflow 上做法:
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);觉得这个好用