扫码关注官方订阅号
蓝墨云班课 - 定义移动环境下即时互动教学新模式
这是在手机端打开的,布局是缩小了,但是没被破坏?为什么
学习是最好的投资!
目前主流手机像素都在 1080P 了,即 1920x1080。那么竖屏状态下屏幕宽为 1080px,如果一个网站居中内容区域宽度在 1000px 左右,那么到手机上看起来就是你图片中的样子了。
1920x1080
viewport 就是用来解决这个问题,让你的样式以设备的物理像素计算,而不是实际的分辨率。
viewport
手机端适配不能用px,用的rem
你还没刷新,刷新就不能看了
viewport 的问题
head区域添加上 viewport 就可以了:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, minimal-ui">
刚进去看了页面 不是自适应的设计 就是普通的页面布局 被html5默认的缩放功能缩放了你看下官方的解释吧 这个默认是缩放的
官方解释viewport
min-width也可以在一屏内显示min-width的宽度?
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
目前主流手机像素都在 1080P 了,即
1920x1080。那么竖屏状态下屏幕宽为 1080px,如果一个网站居中内容区域宽度在 1000px 左右,那么到手机上看起来就是你图片中的样子了。viewport就是用来解决这个问题,让你的样式以设备的物理像素计算,而不是实际的分辨率。手机端适配不能用px,用的rem
你还没刷新,刷新就不能看了
viewport 的问题
head区域添加上 viewport 就可以了:
刚进去看了页面 不是自适应的设计 就是普通的页面布局 被html5默认的缩放功能缩放了
你看下官方的解释吧 这个默认是缩放的
官方解释viewport
min-width也可以在一屏内显示min-width的宽度?