viewport视口

每次在写代码时,都会用vscode生成html代码时,都会有一句

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段是viewport视口设置,如果没有的话手机浏览网页就会自动缩放文本,设置之后你写的网页就会原原本本的显示出来

比较官方一点的说明是:默认情况下，移动端浏览器打开网页时为了显示全部内容，会将页面进行缩小，如果一个网页是专门针对移动端设计的页面，不需要让浏览器缩小，则需要进行viewport设置，将with设置为device-width,initial-scale=1.0.

另外还有userscalable=no设置网页不可缩放(一般应该不需要吧)如:

<meta name="viewport" content="width=device-width, initial-scale=1.0,userscalable=no">

viewport视口相关推荐

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...
viewport视口的概念
viewport视口的概念概念详见 MDN,我摘出来对比了下,如下图: 总结: viewport就是当前窗口的可视部分 Visual Viewport 视觉视口就是视口viewport中的可见部分 ...
viewport 视口
视口的概念视口,英语全称 viewport,指的是设备的屏幕上能用来显示我们的网页的那一块区域,再具体一点,就是浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域. 在早 ...
移动端 viewport视口与meta
一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分 ...
响应式注意要添加“视口”约束标记---viewport
视口:我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980,却和PC屏幕差不多大.原因是苹果主导的这些手机厂商,为了使用户获得完整web体验,很多设备都会欺骗浏览器返回一个数值较大的&quo ...
响应式设计视口 viewport 媒体查询
响应式网页设计能让手机.平板电脑等均能获得完美的浏览体验,能够兼顾多屏幕.多场景的灵活设计,这与一次编写,到处运行有异曲同工的作用. 移动端设备的使用率虽然越来越高,但是计算机端用户也还有不少,基于这 ...
html页面视口,web移动端---视口viewport
视口viewport 视口viewport: 简单点说就是用来预览网页的窗口. 又分为以下两大类: pc端视口:就是浏览器的可视区域. 移动端视口:当前设备的屏幕区域. 一. pc端视口: 1. ...
Ext Js MVC系列二利用Application和Viewport进行应用程序初始化和页面布局
通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...

viewport视口

viewport视口

viewport视口相关推荐

最新文章

热门文章