原生H5页面适配问题

最新推荐文章于 2024-08-10 23:05:55 发布

漠河愁

最新推荐文章于 2024-08-10 23:05:55 发布

阅读量398

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lwaner/article/details/107695379

版权

前端专栏收录该内容

66 篇文章 1 订阅

订阅专栏

我的项目是一套用原生开发的H5页面，在开发过程中遇到一个问题，原生下是没有标签的，所以就只能自己写了，写完之后发现，这个效果居然不适配（ipad,ipad pro,iPhone X等其他机型），这就开始找解决适配的方法了，试过之后呢，发现下面这种方法是可以完成所有机型适配的。
首页meta先加上

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		 <meta content="yes" name="apple-mobile-web-app-capable">
		 <meta content="black" name="apple-mobile-web-app-status-bar-style">
		 <meta content="telephone=no" name="format-detection">
		 <meta content="email=no" name="format-detection">

然后放个js就可以了

<script>
	        /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
	</script>