我仿了一个网页,其中像素是固定大小的,但是在手机端打开,却是布局没被破坏,而是成比例缩小,这是为什么?

<head>

<meta charset="UTF-8">
<meta name="keywords" content="云班课,班课,翻转课堂,移动教学,智能设备教学,教学,JiTT,互动,即时互动,签到,大学,手机应用,经验值,积分">
<meta name="description" content="云班课,翻转课堂,移动教学,智能设备教学,教学,JiTT,互动,即时互动,签到,大学,手机应用,经验值,积分">
<title>蓝墨云班课 - 定义移动环境下即时互动教学新模式</title>
<link rel="stylesheet" type="text/css" href="teach.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript" src="jwpsrv.js"></script>
<script type="text/javascript" src="teach.js"></script>

</head>
图片描述

这是在手机端打开的,布局是缩小了,但是没被破坏?为什么

阅读 4.9k
7 个回答

目前主流手机像素都在 1080P 了,即 1920x1080。那么竖屏状态下屏幕宽为 1080px,如果一个网站居中内容区域宽度在 1000px 左右,那么到手机上看起来就是你图片中的样子了。

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的宽度?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题