视口

提问: 如果是pc的网页如何在移动端进行显示?

历史: 最早期pc端没办法直接查看pc网页,乔布斯为了移动端能访问pc网页,且不出现横向滚动条,发明了视口,视口是默认存在的

视口有两个特征

1.宽度980px;

2.可以缩放;
01.png

视口是什么?

视口是一个介于html网页和手机浏览器之间的一个容器
02.png

视口的演示

代码如下

当页面没有设置视口的视口的时候,我们切换到手机模式时




    
    
    
    Document




    

运行页面如下

03.png

结论

不论手机端的使用的是什么宽度的设备,手机的页面的宽度值,始终是980px;而我们想要盒子宽度撑满手机宽度,此时就需要加上视口





    
    
    
    Document




    
04.png
05.png

代码解释: 设置视口,name="viewport" 然后设置宽度等于手机设备宽度,width=device-width.

你可能感兴趣的:(视口)