手机屏幕适配的研究比较

最新推荐文章于 2026-06-22 15:10:35 发布
原创 最新推荐文章于 2026-06-22 15:10:35 发布 · 2.1k 阅读 · 1
标签
#手机 #浏览器 #safari #jsp #iphone
#xhtml
本文探讨了手机屏幕适配的两种技术方案。技术A通过wml获取手机屏幕大小，但支持有限，不适合所有手机型号。技术B利用viewport对wap网页进行配置，更适应不同屏幕尺寸，但需注意不同浏览器的兼容性问题。iPhone Safari默认viewport为320px，而Android和iPhone支持多点缩放，可能导致显示问题。

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

 

名词解释：

 

VML：VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。

viewport：可视区域，除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。

Safari：浏览器

最低0.47元/天 解锁文章
详解meta-viewport标签中的width和initial-scale属性
leman314的博客
12-29 2万+
视口 视口可以理解为设备或文档对象的逻辑尺寸。 前端ppk大神认为，移动设备上有三个viewport（视口）。 但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。 1. 布局视口 layout viewport 布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。 在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。 由于
屏幕适配方案概要介绍及对比
凉拌西红柿
05-11 278
屏幕适配方案概要介绍及对比前言宽高限定符适配（不推荐使用）smallestWidth适配方案今日头条屏幕适配方案屏幕适配工具 前言 首先致敬鸿洋_大神，接触的第一个成熟适配方案，目前不推荐使用 链接奉上：https://blog.csdn.net/lmj623565791/article/details/45460089 宽高限定符适配（不推荐使用） https://blog.csdn.net/lmj623565791/article/details/45460089 https://www.jianshu
屏幕适配的几种方式
会飞的小驴粪蛋
09-09 4062
Andorid是开源的，开源的好处是“百家争鸣，百花齐放”，更快的打入并占有市场，弊端呢？衍生出许许多多手机厂商，各厂商生产的手机百十种机型不算多吧，往往国人有一种习惯，就是喜欢和别人的不一样，遵循：“别人无，我有；别人有，我好；别人好，我优”的心态。 往往不按照规范走，随意修改API，这都是常态；想做自己独特的东西，API任意修改，做我自己的定制，产品独特……往往只管赚钱，钱是首要的，记不清是...
Android 屏幕适配详解（一）
向着太阳迎着光
12-03 1179
为什么要屏幕适配 由于Android系统的开放性，任何用户、开发者、OEM厂商、运营商都可以对Android进行定制，于是导致运行 Android 的设备多种多样，它们有着不同的屏幕尺寸和像素密度。 尽管系统可通过基本的缩放和调整大小功能使界面适应不同屏幕，但您应做出进一步优化，以确保界面能够在各类屏幕上美观地呈现。 首先我们要搞清楚，几个比较重要的概念。 屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5
网页宽度自动适应手机屏幕宽度的方法
热门推荐
D!eR 个人博客
05-04 10万+
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调整缩放比例   如果
今日头条屏幕适配方案落地研究
weixin_33709609的博客
06-06 191
原文作者:但，我知道，链接： www.cnblogs.com/haichao/p/1… 目录 前言 各平板数据比较 为什么看起来更小了？(头条方案跟最小宽度方案比较) smallesWidth 方案迁移 优缺点 issue 附录（适配核心代码） 前言 大家好，现在给大家推荐一种极低版本的 Android 屏幕适配方案，就是今日头条适配方案，“极低成本”这四个字正是今日头条的适配文章标题。 ...
Android UI之屏幕适配
无敌麦子地的博客
05-25 1007
Android UI之屏幕适配     Android屏幕适配是开发者不得不面临的问题，作为app开发者，你需要考虑应用的兼容性，作为整机开发者，你面临着在一整套的代码中对你当前开发的机型做出适配，解决UI界面显示的问题。   为什么Android需要屏幕适配？       由于Android系统的开放性，任何用户、开发者、OEM厂商、运营商都可以对Android进行定制，修改成他们想要
Android 屏幕适配的研究
Mr_DV_BKHM的博客
04-29 563
一.重要概念 首先，我们先要学习几个重要的概念。 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 什么是dp、dip、dpi、sp、px？他们之间的关系是什么？ 什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？     1.1  屏幕尺寸         屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米         比如常
Android屏幕适配
weixin_34075551的博客
05-07 310
做Android，一定会接触到屏幕适配，而屏幕适配的方案也是有多种多样，这个话题一直没有停止，最近也是想再研究一下适配的多种方式。 先放一个表格 密度类型 代表的分辨率（px） 屏幕密度（dpi） density 换算（px/dp） 比例 低密度（ldpi） 240x320 120 1dp=0.75px 0.75 3 中密度（mdpi） 320x480 160 1dp=1px 1...
简单介绍屏幕适配(三种常用方案)
qq_29722947的博客
10-24 5570
简单介绍屏幕适配(三种常用方案)- 1、像素（px）： 含义：通常所说的像素，就是CCD/CMOS上光电感应元件的数量，一个感光元件经过感光，光电信号转换，A/D转换等步骤以后，在输出的照片上就形成一个点，我们如果把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位“像素”（Pixel）。简而言之，像素就是手机屏幕的最小构成单元。 单位：px（pi...
! Android最强屏幕适配方案对比解析
风离紫竹zhangqiang的博客
12-13 2619
注: 本文已整理成博客,见: https://blog.csdn.net/u011200604/article/details/84990040 注: 本文最终方案推荐源于JessYanCoding/AndroidAutoSize 的开源库(详见GitHub) 在Android开发中，由于Android碎片化严重，屏幕分辨率千奇百怪，而想要在各种分辨率的设备上显示基本一致的效果，适配成本越来越...
给手机做高度和宽度的适配
AliceWu的博客
01-15 2305
在不同型号大小的手机中，我们需要为手机做适配来保证我妈们想要达到的需求。(移动端的单位是rem) 给手机（高度）做适配的代码,其中 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 var height=window.screen.height; var adjustRem=(height/667*62.5).toFixed(2)+'%'; $("html...
附录H-2 技术预研报告
大龙软件工作室
01-16 601
目 录 0. 文档介绍 4 摘要 4 读者对象 4 参考文档 4 术语与缩写解释 4 背景介绍 5 技术预研目标 5 技术预研取得的工作成果 5 技术A的研究报告 5 技术B的研究报告 5 文档介绍 0.1 文档目的 0.2 文档范围 0.3 读者对象 0.4 参考文档 提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下： [标识符] 作者，文献名称，出版单位（或归属单位），日期 例如： [SPP-PROC-PP] SEPG，需求开发规范，机构名称，日期 0.5 ..
手机屏幕适配原理及实现
rachel_4869的博客
08-08 1951
手机屏幕是用户与 App 最直接的交互点 不同的分辨率下用户对我们的 App 具有明显的感观差异，主流分辨率的更新迭代却又完全独立于 App 进行。这让我们想要使 App 在绝大多数主流手机上都保持感观、体验的一致性提出了很大的挑战。屏幕尺寸 严格来说，屏幕尺寸实际被物理尺寸和显示分辨率两个部分定义。 而我们今天对各类手机、Pad 设备所说的屏幕尺寸，只指物理尺寸。 如果一块手机屏幕的物理...
手机端和wap端页面的自适应技术方案
phil_code的博客
03-07 5650
网站aaa.xxx.com是有wap和pc两种页面，同一个url请求，nginx根据客户端的user-agent返回不同的适配页面，如下图：但是遇到一种情况，某m.xxx.com里有个入口跳转到我们的网站aaa.xxx.com首页，m.xxx.com无论是pc访问还是手机访问都是显示wap页样式，这就要求在m.xxx.com上跳到aaa.xxx.com首页也要显示wap页样式(如下图1)，aaa....
手机截图如何提取文字？
qq_14945847的博客
02-15 2989
然而，图片中的文字信息往往难以获取，尤其对于那些需要快速获取信息的人们来说，阅读图片中的文字会是一项繁琐且费时的任务。现在，我们有一个好消息要告诉大家：通过使用我们的图片文字提取工具，您将能够轻松地提取图片中的文字信息。您只需要将图片上传到我们的平台，然后工具就会自动识别图片中的文字，并将其转化为可编辑的文本格式，方便您进行编辑、存储和分享。高精度：我们的工具采用了最先进的OCR技术，可以快速准确地从图片中提取文字信息，避免了传统OCR技术中的错误和漏识别问题。将需要提取文字信息的图片上传到我们的平台。
2023年1月手机热门品牌型号排行榜（手机行业趋势分析）
jingcanmou_data的博客
02-15 2499
1月份手机产品在京东平台上的销售量达到640万+，环比增长51.3%，同比去年仍呈增长趋势，增长率为9.5%。
iOS 27 把 AI 功能塞进账单、密码、消息、电话、日历、捷径、智能家居和 Safari 等日常流程
小杨互联网
06-22 491
如果你已经在手机里装了三个效率 App、一个密码工具、一个记账工具、一个自动化工具，先别急着续年费。
传音 Infinix 手机数据迁移至 iPhone 完整操作
最新发布
Digitally的博客
06-22 284
不过不必担心，无论你需要迁移通讯录、照片、短信还是各类文件应用，这里提供多种简单高效的方案，帮你把全部数据转移到新 iPhone。通过这款应用，你可以转移通讯录、短信、照片、视频、浏览器书签、邮箱账号、日历等内容。如果你想快速、完整、无限制地把 Infinix 旧手机所有内容迁移到新 iPhone，包括通讯录、短信、照片、视频、音乐、文档，甚至 WhatsApp 聊天记录，专业手机互传工具是最优选择。开机激活全新 iPhone，按指引完成初始化流程，进入「应用与数据」页面时，点击「从安卓设备转移数据」。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值