关于移动端flexible适配ipad和ipad Pro

2 篇文章 0 订阅

当我在做一个H5的项目时,通过是flexible.js实现了rem自适应,但是我发现在iPad和iPad Pro中显示有问题,由此记录下解决这个问题的方法

解决移动端flexible适配ipad和ipad Pro

因为我的项目是使用的vue-cli框架,所以直接在inedx.html中加入如下代码即可

<script>
	// 适配pad padPro
    /(pad|pod|iPad|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>
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VSCode移动端Flexible是一个用于移动端适配的插件。它可以将设计图上的像素单位(px)自动转换为相对单位rem,从而实现在不同屏幕尺寸上的自适应布局。通过使用Flexible,开发者可以方便地适配不同屏幕尺寸的移动设备,减少手动计算转换的工作量。同时,Flexible还提供了一些基本的用法,比如使用@media查询来设置不同屏幕尺寸下的样式。这样可以根据不同的设备宽度,为元素设置不同的背景颜色等属性,以实现更好的用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [使用Flexible实现移动端页面的终端适配,及快捷设置开发工具px转换rem](https://blog.csdn.net/u012716788/article/details/131065996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [关于移动端的尺寸适配,vscode中支持自动转换的插件](https://blog.csdn.net/weixin_47655415/article/details/122217188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值