在不同的安卓和 iOS 设备上对移动 H5 页面进行兼容调整
在移动互联网时代,H5页面已成为移动应用程序开发的重要组成部分。然而,在不同的手机型号、操作系统版本以及浏览器内核环境下,H5页面的兼容性问题成为了移动应用开发者头疼的问题。
移动端H5页面兼容适配的重要性
在实践中,兼容性问题会直接影响H5页面的UI展现、用户体验以及功能效果的难度,因此,对于移动端应用程序开发者,兼容适配是必不可少的环节。
在本文中,我们将重点介绍在不同Android和iOS设备上的H5页面兼容适配实践,包括针对WebView的差异、处理不同分辨率的屏幕、处理Safari浏览器中的问题等。
Android设备兼容适配实践
处理不同分辨率的屏幕
一般手机的分辨率分为高清(HD)和全高清(FHD),不同的分辨率会导致布局和UI元素大小显示的效果不同。因此,在H5页面中对于不同分辨率的手机,我们需要进行屏幕适配,以保证页面UI的呈现效果。
为了适配屏幕,我们可以采用CSS媒体查询来实现。以2x、3x、4x三个倍数的情况为例,代码实现如下:
/* 2x 像素密度 */
@media screen and (-webkit-device-pixel-ratio:2) {
/* 样式代码 */
}
/* 3x 像素密度 */
@media screen and (-webkit-device-pixel-ratio:3) {
/* 样式代码 */
}
/* 4x 像素密度 */
@media screen and (-webkit-device-pixel-ratio:4) {
/* 样式代码 */
}
处理WebView的差异
在Android设备中,WebView的表现形式是在系统中通过应用程序包(APK)来提供的。不同版本的Android设备或者不同的ROM版本,其内附带的WebView的版本也不同,从而导致H5页面在不同设备上展现的效果不同。
对于WebView的差异,我们可以采用特性检测进行处理。针对不同版本的WebView,我们可以使用特定的CSS代码或者JavaScript代码进行适配。例如,在Manifest文件中定义了最低的API版本为14,设置WebView加载缩放相关的属性为100时,代码实现如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<script>
if (/Android [\S\s]+AppleWebkit\/(\d{3})/.test(navigator.userAgent)) { // 特性检测
var scale = parseInt(window.screen.width) / 640; // 计算缩放比例
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=640,initial-scale=' + scale + ',maximum-scale=' + scale + ',user-scalable=no,viewport-fit=cover'); // 动态设置viewport属性
</script>
处理移动端设备默认字体大小
在Android设备中,不同的系统版本会对默认字体大小设置有所不同。例如,部分手机厂商会在系统中设置默认字体大小为18px,而不是标准的16px。这会导致H5页面在不同的Android设备上显示的字体大小不一致的问题。
对于这种情况,我们可以使用原生的JavaScript代码进行处理。例如,代码实现如下:
(function(){
if (typeof window.orientation != 'undefined') {
var fontSize = 16 * window.innerWidth / 375;
document.documentElement.style.fontSize = fontSize + 'px';
}
})();
看这里,注意啊:以上代码中375是设计稿宽度,16是字体基准大小。
iOS设备兼容适配实践
处理不同分辨率的屏幕
和Android设备一样,iOS设备也存在着屏幕分辨率的问题。为了解决这个问题,我们同样可以采用CSS媒体查询进行处理,例如代码实现如下:
/* iPhone 4/4S */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) {
/* 样式代码 */
}
/* iPhone 5/5S/5C/SE */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
/* 样式代码 */
}
/* iPhone 6/6S/7/8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) {
/* 样式代码 */
}
/* iPhone 6 Plus/6S Plus/7 Plus/8 Plus */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) {
/* 样式代码 */
}
/* iPhone X/XS/11 Pro */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) {
/* 样式代码 */
}
/* iPhone XR/11 */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
/* 样式代码 */
}
/* iPhone XS Max/11 Pro Max */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
/* 样式代码 */
}
处理WebView的差异
在iOS设备中,WebView的版本升级通常会伴随着操作系统的升级。同样的,不同的iOS设备之间也存在着WebView版本的差异。因此,我们需要针对不同的WebView版本,对H5页面进行特性检测,然后进行相应的兼容适配。例如,代码实现如下:
if (/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent)) {
/* iOS版本 WebView */
var version = window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
var majorVersion = parseInt(version[1], 10);
if (majorVersion >= 10) {
/* iOS 10或以上的WebView */
/* 样式代码 */
} else if (majorVersion >= 8) {
/* iOS 8或以上,iOS 10以下的WebView */
/* 样式代码 */
} else {
/* iOS 8以下的WebView */
/* 样式代码 */
}
}
处理Safari浏览器中的问题
在iOS设备的Safari浏览器中,也存在着H5页面的兼容问题。例如,设备旋转、横竖屏切换时,页面的布局和UI元素的大小都会发生变化,这也可能会影响较为复杂的页面,比如一些交互界面和游戏。
对于这种问题,我们可以通过横竖屏事件来进行界面的调整。例如,代码实现如下:
var isLandscape = function () {
return window.orientation === 90 || window.orientation === -90;
};
window.addEventListener('resize', function() {
if (isLandscape()) {
/* 横屏 */
/* 样式代码 */
} else {
/* 竖屏 */
/* 样式代码 */
}
});
常见的兼容性Bug及解决方案
在移动端页面的开发中,一些常见的兼容性Bug可能会影响页面的功能及用户体验。下面是一些常见的Bug及解决方案:
点击事件的延迟:
移动端浏览器或WebView中可能存在一个约300ms的点击事件延迟问题。为了解决这个问题,我们可以采用fastclick库来解决。使用方式如下:
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
弹性滚动效果:
在移动端设备中,iOS设备和Android设备的滚动效果可能存在差异,其中iOS设备具有较为明显的弹性滚动效果,而Android设备则基本没有。为了统一移动端页面的滚动效果,我们可以使用一些常见的第三方滚动库,比如iScroll、better-scroll等。
Android设备web字体渲染问题:
在某些Android设备中,字体渲染存在问题,导致字体模糊不清,从而影响UI的呈现效果。为了解决这个问题,我们可以采用字体替换的方式来解决。例如,代码实现如下:
@font-face {
font-family: 'webfont';
src: url('./webfont.ttf');
}
body {
font-family: 'webfont';
}
总结
在实际开发中,移动端H5页面的兼容适配一直是一个重要的环节。针对不同的设备、不同的浏览器内核版本,我们需要采取相应的处理方案,以保证页面的UI展现、用户体验以及功能效果的准确呈现。通过合理的适配方案,可以提高移动应用程序的兼容性和用户体验。
推荐阅读
-
在不同的安卓和 iOS 设备上对移动 H5 页面进行兼容调整
-
Android 开发中 nodpi、xhdpi、hdpi、mdpi、ldpi 的概念 - 术语和概念 屏幕尺寸 屏幕的物理尺寸,基于屏幕的对角线长度(如 2.8 英寸、3.5 英寸)。 简而言之,安卓系统将所有屏幕尺寸简化为三大类:大、普通和小。 程序可以为这三种屏幕尺寸提供三种不同的布局选项,然后系统会以合适的方式将布局选项呈现到相应的屏幕上,这个过程不需要程序员用代码进行干预。 屏幕纵横比 屏幕的物理长度与物理宽度之比。程序只需使用系统提供的资源分类器 long(长)和 notlong(不长),就能为具有特定长宽比的屏幕提供配制材料。 分辨率 屏幕的像素总数。请注意,分辨率并不意味着长宽比,尽管在大多数情况下,分辨率表示为 "宽度 x 长度"。在安卓系统中,程序一般不直接处理分辨率。 密度 根据屏幕分辨率,沿屏幕宽度和长度排列的像素数量。 密度较低的屏幕在长度和宽度方向上的像素都相对较少,而密度较高的屏幕通常会在同一区域内排列很多甚至非常非常多的像素。屏幕的密度非常重要;例如,一个界面元素(如按钮)的长度和宽度以像素为单位,在低密度屏幕上会显得很大,但在高密度屏幕上就会显得很小。 独立于密度的像素(DIP)是指程序用来定义界面元素的抽象意义上的像素。它作为一个与实际密度无关的单位,帮助程序员构建布局方案(界面元素的宽度、高度和位置)。 与密度无关的像素在逻辑上与像素密度为 160 DPI 的屏幕上的像素大小相同,而 160 DPI 是安卓平台默认的显示设备。在运行时,平台会以目标屏幕的密度为基准,"透明 "地处理所有所需的 DIP 缩放操作。要将与密度无关的像素转换为屏幕像素,可以使用一个简单的公式:像素 = DIP * (密度 / 160)。例如,在 240 DPI 的屏幕上,1 个 DIP 等于 1.5 个物理像素。强烈建议使用 DIP 来定义程序界面的布局,因为这样可以确保用户界面在所有分辨率的屏幕上都能正常显示。 为了简化程序员在面对各种分辨率时的麻烦,也为了让各种分辨率的平台都能直接运行这些程序,Android 平台将所有屏幕以密度和分辨率作为分类方式,分别分为三类:- 三大尺寸:大、普通、小;- 三种不同密度:高(hdpi)、中(mdpi)和低(ldpi)。DPI 表示 "每英寸点数",即每英寸的像素数。如果需要,程序可以为不同的屏幕尺寸提供不同的资源(主要是布局),为不同的屏幕密度提供不同的资源(主要是位图)。除此之外,程序无需对屏幕尺寸或密度进行任何额外处理。执行时,平台会根据屏幕本身的尺寸和密度特性自动加载相应的资源,并将其从逻辑像素(DIP,用于定义界面布局)转换为屏幕上的物理像素。
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明: