文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 是否允许用户缩放 初始缩放比例 最小缩放比例 最大缩放比例 )

一、meta 视口标签简介 ---- meta 视口标签 就是为了移动端而设计的 , 该设置只有在移动端生效 ; meta 视口标签 用于设置 浏览器 按照 理想视口 显示页面 ; 使用 meta 视口标签...二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ---- 在如下的 meta 标签中 : meta name="viewport...参数 设置 网页缩放的最小比例 , 该值大于 0 即可 ; maximum-scale 参数 设置 网页缩放的最大比例 , 该值大于 0 即可 ; 如果 不设置 meta 视口标签 , 在移动端 默认的...视口标签代码示例 ---- 1、不设置 meta 视口标签代码示例 如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示...980 像素宽度的网页中显示 ; body 中的文本 会缩小到很小的大小 ; 2、设置 meta 视口标签代码示例 设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 ,

3.9K21

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

同时，还可以使用meta标签来指定布局视口的大小和缩放比例，例如：meta name="viewport" content="width=device-width, initial-scale=1.0..."> , 该标签的作用是告诉浏览器，网页的宽度应该等于设备的宽度，并且初始缩放比例应该为1.0。...为了设置理想视口，可以 使用 meta 标签来指定视口大小和缩放比例， 例如 : 设置 meta name="viewport" content="width=device-width, initial-scale...=1.0"> 标签告诉浏览器，网页的宽度 应该等于 设备的宽度，并且初始缩放比例应该为1.0。...通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。

1.3K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

    一、视口标签设置 参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例.../ 最大缩放比例 ) 博客 , 编写 meta 视口标签 , 视口标签内容如下 : meta name="viewport" content="width=device-width, user-scalable...=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> meta 视口标签属性含义 : name 属性指定了 视口的名称 为 viewport...; content 属性中的参数 用于设置 视口大小 和 缩放比例 ; width=device-width 样式 设置 网页宽度 = 设备宽度 , 即 理想视口 ; user-scalable=...-- 设置 meta 视口标签 --> meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable

    2.4K10

    Meta标签的那些事

    Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。...我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。 ?...utf-8" /> 　　该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。...--指示IE以目前可用的最高模式显示内容--> 3、SEO优化相关 　　页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。...– 初始的缩放比例 （范围从 > 0 到 10） 　　minimum-scale – 允许用户缩放到的最小比例 　　maximum-scale – 允许用户缩放到的最大比例 　　user-scalable

    94250

    HTML中的Meta标签

    Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。...我现将前端页面开发经常用到的meta标签内容整理成文，加入了移动端web开发meta信息，供需要时查阅。...-8"> 该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。...3、SEO优化相关 meta name="description" content="不超过150个字符"> 页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。...– 初始的缩放比例 （范围从 > 0 到 10） minimum-scale – 允许用户缩放到的最小比例 maximum-scale – 允许用户缩放到的最大比例 user-scalable – 用户是否可以手动缩放

    3K30

    第118天：移动端开发——视口

    但我们不能完全忽视移动设备上的屏幕尺寸。所以该说明一下视觉视口了。 视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口。布局视口还是保持在原来的宽度。...看下图说明一下视觉视口区域 ? 如上图，红色箭头之间的区域就是视觉视口的区域。它和设备的屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。...3、理想视口 布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。...如果没有meta视口标签，那么布局将会维持它的默认宽度。 如下代码，告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。...并且它的CSS像素的数量会随着用户缩放而改变。 理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。

    95420

    移动端viewport属性说明笔记

    # 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...缩放比例关系：当前缩放值 = 理想视口宽度 / 视觉视口宽度 用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...布局视口与理想视口的宽度一致： meta name="viewport" content="width=device-width"> # 常用的针对移动网页优化过的页面的 viewport meta...标签 meta name=”viewport” content="width=device-width, initial-scale=1, maximum-scale=1"> # 属性说明 属性名 取值...标签仅对移动端浏览器有效，对 PC 端浏览器无效 缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度 单独设置 initial-scale 或 width

    1.6K20

    浅谈移动端中的视口（viewport）

    布局视口（layout viewport） 一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题...如果要显式设置布局视口，可以使用 HTML 中的 meta 标签： "viewport" content="width=400"> ? 布局视口使视口与移动端浏览器屏幕宽度完全独立开。...视觉视口和缩放比例的关系为： 当前缩放值 = 理想视口宽度 / 视觉视口宽度 所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。...2.视口的设置 我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置 "viewport" content="width=device-width,initial-scale...yes 有几点值得注意： viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的 当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度

    2.3K20

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...2.4meta视口标签 　　meta name ="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0

    1.4K31

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...2.4meta视口标签 meta name ="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

    1.7K10

    移动开发-流式布局

    、修复了浏览器的bug、是模块化的 、拥有详细的文档 Normalize.css官网地址： http://necolas.github.io/normalize.css/ meta视口标签: 标准的 viewport...maximum-scale 最大缩放比，大于0的数字 minimum-scale 最小缩放比，大于0的数字 user-scalable 用户是否可以缩放，yes或no (1或0) 布局视口 layout...viewport: 视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口 视觉视口 visual viewport: 它是用户正在看到的网站的区域，可通过缩放去操作视觉视口...理想视口 ideal viewport: 理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致，就是设备有多宽...，布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

    1.1K30

    移动端基础

    视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...就是手机屏有多宽，布局视口就有多宽 2.4meta视口标签 标准写法： meta name ="viewport" content="width=device-width, user-scalable

    2K20

    移动web开发

    上面还能选择手机的型号. 02 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分成布局视口,视觉视口和理想视口,当然,我们只需要理想视口....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....视觉视口 visual viewport 字面意思,他是用户正在看到的网站的区域.注意:是网站的区域 我们可以通过缩放去操作视觉视口.但不会影响布局视口,布局视口仍保持原来的宽度....理想视口,对设备来讲,是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...视口标签 这个就是标准(完美)的写法 meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable

    2.3K21

    第119天：移动端：CSS像素、屏幕像素和视口的关系

    一、视口 1、layout viewport（布局视口） 　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...1、使用viewport元标签控制布局 首先看一下viewport元标签极其属性： 1 html 代码: 2 meta id="viewport" name="viewport" content="width...网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip...布局宽度：布局视口的逻辑像素的数量 屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口） 逻辑宽度：逻辑像素的数量 视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport

    1.7K50

    Bootstrap笔记

    viewport" content="width=device-width, initial-scale=1"> 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大...，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）width...:视口的宽度initial-scale：初始化缩放user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）minimun-scale:最小缩放initial-scale第三方依赖jQueryBootstrap...，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为...1） width:视口的宽度 initial-scale：初始化缩放 user-scalable:是否允许用户自行缩放（值：yes/no; 1/0） minimun-scale:最小缩放initial-scale

    3.4K90

    理想的viewport(视口)并不存在

    在你依据少数几个严格的断点（breakpoints）来做设计决策之前，确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。...在Set Studio，我们进行了一个小型的非正式实验，以回答“视口尺寸有多碎片化？”这个问题。我们收集了超过120,000个数据点，涉及超过2,300个不同的视口尺寸。...如果我们从收集到的数据点中筛选出前20个独特的视口尺寸，主要都是较小的尺寸。你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是，视口尺寸也会因环境条件而有所不同。...我们决定将任何宽度大于800px的视口视为“桌面端”，或者我们更喜欢称之为大视口。 你可能会觉得“800px对于桌面端来说太小了”，如果我们是在测量屏幕尺寸，你是对的。但我们这里测量的是视口尺寸。...来看看所有的视口尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发，我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。

    21730

    前端成神之路-移动web开发_流式布局

    iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽 总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 ?...最标准的viewport设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比

    1.6K21

    IT课程 CSS基础 033_响应式布局

    媒体查询 使用 CSS 的媒体查询可以根据设备的特征（如屏幕宽度、高度、设备类型等）应用不同的样式。这使得你可以为不同的屏幕尺寸定义不同的布局。...img src="zhaojian.jpg" alt="Responsive Image"> 效果： 视口设置 使用 meta> 标签设置视口，以确保页面在移动设备上正确缩放。...示例： meta name="viewport" content="width=device-width, initial-scale=1.0"> 这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度...和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。 initial-scale：设定了页面的初始缩放，我们设定为 1。 height：特别为视口设定一个高度。...minimum-scale：设定最小缩放级别。 maximum-scale：设定最大缩放级别。 user-scalable：如果设为 no 的话阻止缩放。

    10410
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券