关于工作遇到的移动端适配的一点问题

    今天在公司查看页面,页面完全是由之前的前端书写的,现在还在熟系代码,

这时候我看到了一个js文件,

<script type="text/javascript" src="/2017wap/static/phone/js/flexslider-min.js"></script>

flexslider.js? 这时候我还不知道这个文件是做什么用的,以为是之前前端书写的,结果一搜索发现这个是

淘宝的移动端适配方案lib-flexible.

    赶紧查看github页面,发现了这么一段话  。  

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版    本,都存有一定的问题。建议大家开始使用viewport来替代此方案。

    作为刚学习前端不久的我,没有听说过这种早期的移动端适配方案,既然公司还在使用,那么我可以进行一下了解,首先可以看出的是,该方案是根据页面大小来进行html文件的font-size属性修改的,而其他元素都是使用rem进行适配,这样可以匹配大多数的移动端页面,这里又引入了物理像素与逻辑像素的概念,这个今后再谈吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue 3移动端适配问题,可以参考以下步骤: 1. 首先,可以使用一个公共方法来判断是否为移动端。你可以将以下代码添加到你的代码中: ```javascript export function isPc() { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return false; } else { return true; } } ``` 这个方法会根据用户的User Agent来判断是否为移动端。 2. 其次,你可以使用postcss-pxtorem插件来实现rem适配。在你的根目录下创建一个postcss.config.js文件,并添加以下代码: ```javascript module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换 } } } ``` 这个配置文件会将像素自动转换为rem单位,方便移动端适配。 3. 如果你在针对iPad和iPad Pro设备时遇到无效的问题,你可以在index.html文件中添加以下代码: ```html <script> /(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<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue项目的移动端适配方案](https://blog.csdn.net/weixin_40758662/article/details/131812827)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue3-移动端适配](https://blog.csdn.net/m0_65791412/article/details/125177494)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值