Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
752 views
in Technique[技术] by (71.8m points)

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

<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>
图片描述

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

viewport 就是用来解决这个问题,让你的样式以设备的物理像素计算,而不是实际的分辨率。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...