手机屏幕适配技术预研

最新推荐文章于 2022-05-13 12:36:41 发布

tkw123

最新推荐文章于 2022-05-13 12:36:41 发布

阅读量3.5k

点赞数 1

分类专栏：开发之路文章标签：手机浏览器 safari jsp iphone xhtml

本文链接：https://blog.csdn.net/tkw123/article/details/6717163

版权

开发之路专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

随着手机屏幕的不断的变化，同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小，当然也存着在一些不规则的屏幕分辨率心寸大小。对于很多的UI来说，不同的手机屏幕很多时候得出多套的图才能保证手机客户端在不同的屏幕上实现匹配。针对手机客户端在不同屏幕下的实现进行规划，并制定出能够计算出具体控件位置的填充区算法，这个是前期对于不同的手机屏幕的匹配做出的一个界面适配算法。

术语与缩写解释

VML	VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。
viewport	可视区域，除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。
Safari	浏览器Safari是苹果计算机的最新作业系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心

技术预研取得的工作成果

通过本次预研，我学到了怎么去对不同型号手机屏幕进行适配，更是知道怎么去选择更好的方法去进行研发。

本次预研主要得到以下成果：

1. 通过不同手机得到手机屏幕的尺寸大小；

2. 通过“viewport”设置对手机屏幕自动匹配。

技术A的研究报告

通过wml获取手机屏幕大小：

Wap的开发和一般的jsp开发区别不是很大，就是在传统的html上面增加：

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

其它方面，包括语法和jsp是一样的。

假想：因为jsp页面的显示中有一个属性width，可以设置jsp页面显示的大小。只要我得到浏览网站的手机的宽度之后，将宽度的值赋值在width后面，就可以控制页面显示的大小了，这样只要我们将页面控制好，在手机里面显示的结果应该是整个页面。

尝试：

通过request.getHeader("x-up-devcap-screenpixels"); 我们可以得到结果：

HTTP_X_UP_DEVCAP_SCREENPIXELS:120,96

高度：120，宽度：96

通过如下代码：

Display display = ((WindowManager)getSystemService(WINDOW_SERVICE)).getDefaultDisplay();

int width = display.getWidth();

int height = display.getHeight();

int orientation = display.getOrientation();

当orientation为1的时候，此时手机是竖屏，那么jsp页面中width的值为96px，如果orientation的值为2的时候，此时手机屏幕为横屏，jsp页面中的width的值为120px。因为wap页面的高度可以通过手机屏幕的滑动或者翻页来进行控制，所以这里只讨论了手机的宽度问题。

实现：通过这种方法进行了实验，没有得到试用手机的高度和宽度，在网上搜索发现，这种方案支持的手机有限，尤其是对GSM手机支持更是有限。对于中兴手机和MOTO不支持。很多网站给出了现在不支持的手机的型号，和这些手机的高度与宽度，如下所示：

LG手机：

LGE-CU6260:SCREEN_WIDTH_CHARS=8,SCREEN_HEIGHT_CHARS=9,COLOR_DEPTH=65536,PICTURE_WIDTH=120,PICTURE_HEIGHT=160,PICTURE_FORMAT=png/bmp,RINGTONE_FORMAT=mid

Motorola手机：

MOT-V688:SCREEN_WIDTH_CHARS=8,SCREEN_HEIGHT_CHARS=8,COLOR_DEPTH=65536,PICTURE_WIDTH=128,PICTURE_HEIGHT=128,PICTURE_FORMAT=png,RINGTONE_FORMAT=mid

等等。目前不支持的手机型号就是这么多，随着手机不断的更是，相信不遵循这个规则的手机型号将会越来越多，如果采用这个方案进行手机屏幕适配的话，那么我们将要不断的去对不支持该方式的手机型号进行数据更新。这样讲不断的增加我们的工作量，而且很有可能做的不完善，所以这种方案不可以。

技术B的研究报告

通过“viewport”对wap网页进行配置：

通过对现在a3g网站进行测试，发现网页最佳显示的分辨率大概在240*400，当手机屏幕更大的时候，有的手机还是能正常的显示网页，但是有的手机显示的页面就会比较混乱，可能是手机浏览器的不同而导致的。

通过viewport属性对手机屏幕自动适配进行了设置。设置的参数如下：

Viewport所有的属性：

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

例如：

width=960 或device-width

height=1000 或 device-height

initial-scale=0.5

maximum-scale=2

minimum-scale=1

user-scalable=1 或 0(yes 或 no)

下面我们说说device-width，字面意应该是viewport宽度等于设备宽度，viewport，也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。（无论你屏幕多大，如果你装足够多的toolbar，你的viewport最终也会消失掉。）在桌面浏览器中，viewport的大小是与浏览器窗口大小直接相关的，窗口大了viewport自然就大，同时随着viewport的改变，页面布局可能也跟着变。例如width: 100%的页面宽度就总是和viewport宽度一致。

然而iPhone的Safari不是这样理解viewport的，它基于viewport呈现页面，然后用户缩放页面后viewport保持不变，仅仅是页面内容按比例缩放了。举个例子，在不设置viewport的情况下，默认viewport为宽度980（单位是像素），这时候页面的呈现出来的布局和在桌面短viewport宽度为980时呈现的结果一致，然而因为iPhone屏幕宽度为320，因此按比例缩小了。

但在iphone在实际中不同的浏览器都给出了个定值：320px；这个值还是源于Apple，因为早期iphone的分辨率为320px × 480px，大量为iphone量身定制的网站都设置了viewport:width=device-width，并且按照宽度320px来设计制作，所以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。

如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。

目前，我们设计的网页里面将初始的缩放比例initial-scale设置的是1.4，这样屏幕相对窄点的手机显示的页面将是比较混乱。将这里的1.4更改为1.0之后就不出现该问题了。对于android和iphone手机支持多点缩放，如果对我们的网页缩放太小就会导致手机显示混乱。当页面放大超过一定倍数时，显示的字体和图片就会显得失真。