移动端适配的几种解决办法
生活随笔
收集整理的這篇文章主要介紹了
移动端适配的几种解决办法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
所謂移動(dòng)端適配,就是WebApp在不同尺寸的屏幕上等比顯示
原則
思路
viewport 適配
<meta name="viewport" content="width=750,initial-scale=0.5">initial-scale = 屏幕的寬度 / 設(shè)計(jì)稿的寬度。一般設(shè)計(jì)稿的尺寸是實(shí)際開發(fā)尺寸的2倍。開發(fā)的時(shí)候根據(jù)設(shè)計(jì)稿/2即可。
<head><script>const WIDTH = 750const mobileAdapter = () => {let scale = screen.width / WIDTHlet content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}總結(jié)
以上是生活随笔為你收集整理的移动端适配的几种解决办法的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端常见浏览器兼容性问题及解决办法
- 下一篇: 【前端面试题】2021/3/12挺经典的