移动端适配的几种解决办法
【摘要】
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示
原则
开发时方便，写代码时设置的值要和标注的 160px 相关
方案要适配大多数手机屏幕，并且无 BUG
用户体验要好，页面看着没有不适感
思路
写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部...
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示
原则
- 开发时方便，写代码时设置的值要和标注的 160px 相关
- 方案要适配大多数手机屏幕，并且无 BUG
- 用户体验要好，页面看着没有不适感
思路
- 写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
- 按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px
- 固定尺寸+弹性布局，不需要缩放
viewport 适配
<meta name="viewport" content="width=750,initial-scale=0.5">
initial-scale = 屏幕的宽度 / 设计稿的宽度。一般设计稿的尺寸是实际开发尺寸的2倍。开发的时候根据设计稿/2即可。
-
<head>
-
<script>
-
const WIDTH = 750
-
const mobileAdapter = () => {
-
let scale = screen.width / WIDTH
-
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}
文章来源: sunmenglei.blog.csdn.net，作者：孙叫兽，版权归原作者所有，如需转载，请联系作者。
原文链接：sunmenglei.blog.csdn.net/article/details/114681824
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）