前端学习笔记96-手机像素

最新推荐文章于 2024-08-18 08:09:12 发布

小欣CZX

最新推荐文章于 2024-08-18 08:09:12 发布

阅读量138

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45034895/article/details/117104453

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记96-手机像素

问题
总结

视频里给了一个可以看部分手机分辨率的网站。我在里面找半天没找到，我就不找了，链接放这里，找到的小伙伴麻烦教教我。链接

某部手机的大小为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端网页，可以在移动端看，但是体验不好，需要专门写。

小欣CZX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记96-手机像素

前端学习笔记96-手机像素问题总结视频里给了一个可以看部分手机分辨率的网站。我在里面找半天没找到，我就不找了，链接放这里，找到的小伙伴麻烦教教我。链接某部手机的大小为4.7寸，分辨率为7 501334。我的笔记本22寸，分辨率是19 201080，这个很明显，手机的像素点比我的笔记本的像素点小。问题宽度为900的网页，在该手机中如何显示？这里的代码我把meta的后两个注释掉了，原因后面会讲。<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫