视频里给了一个可以看部分手机分辨率的网站。我在里面找半天没找到,我就不找了,链接放这里,找到的小伙伴麻烦教教我。链接
某部手机的大小为4.7寸,分辨率为7 501334。
我的笔记本22寸,分辨率是19 201080,这个很明显,手机的像素点比我的笔记本的像素点小。
问题
宽度为900的网页,在该手机中如何显示?
这里的代码我把meta的后两个注释掉了,原因后面会讲。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
div{
width: 900px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
点这个,然后选择对应的手机。
从上图可以看到,即使手机屏幕宽度小于900,显示出来也没有被撑满,这是为啥?
默认情况下,移动端网页视口宽度设置为980个像素。
如果网页宽度大于980,则会自动缩放。
总结
大部分的PC端网页,可以在移动端看,但是体验不好,需要专门写。