第23天 html viewport

最新推荐文章于 2024-01-04 15:09:22 发布
最新推荐文章于 2024-01-04 15:09:22 发布
阅读量206 收藏
点赞数
分类专栏： 面试题 html css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36529240/article/details/122358992
版权
面试题 同时被 3 个专栏收录
190 篇文章 3 订阅
订阅专栏
css
28 篇文章 1 订阅
订阅专栏
html
21 篇文章 0 订阅
订阅专栏 
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu
 // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’
 // device-width 设备宽度
 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
 // minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
 // maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
 // user-scalable 是否允许⼿动缩放

延伸提问
怎样处理 移动端 1px 被 渲染成 2px 问题

局部处理

  • mate 标签中的 viewport 属性 ， initial-scale 设置为 1
  • rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；

全局处理

  • mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5
  • rem 按照设计稿标准⾛即可

扩展：

<!DOCTYPE html> <!--H5标准声明，使⽤ HTML5 doctype，不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使 <meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=
<!--添加智能 App ⼴告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果 <meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码- <meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化，主要是针 <meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
江-月*夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第十二章.rar_HTML__HTML_
08-09
二、购物车界面的HTML结构 一个购物车界面通常由多个部分组成，如产品列表、详细信息、购物车按钮、总计和结算区域等。在HTML中，我们可以使用`<div>`标签来创建这些区域，并通过CSS（层叠样式表）进行样式设计。...
html：详解viewport
yunduanaoligei的博客
11-03 6054
今天分享下”html：详解viewport“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 一.viewport的概述 ​手机端电脑浏览器一般都是在一个比显示屏更宽的虚拟对话框中3D渲染页面，这一虚拟对话框便是viewport，目地是一切正常展现沒有做移动端适配的网页，能够让她们详细的呈现给客户。大家有时候用移动设备浏览pc端网页就会见到一个横着下拉列表，这儿可表明范围的宽度便是viewport的宽度。 基本应用，页
HTML中meta=“viewport”的介绍
diji8584的博客
08-07 2074
viewport就是浏览器上用来显示网页的那部分区域 layout viewport:整个网页所占据的区域（包括可视也包括不可视的区域） 默认的 visual viewport:网页在浏览器上的可视区域（浏览器中能够看见的区域） ideal viewport:ideal viewport是一个能完美适配移动设备的viewport（没有固定尺寸，就是屏幕的宽度） <...
关于html中viewport和initial-scale以及device-width的理解
胡聊前端的博客
01-05 6647
上图是一些放大镜，不是打酱油的… 我们在初始化一个html页面的时候，往往会首先在页面头部加上这样一个标签： <meta name="viewport" content="width=device-width, initial-scale=1"> 那么这个标签中viewport，width=device-width, initial-scale=1分别都是什么意思，为什么需要这样设置呢？ 首先说一下viewport，中文翻译过来可以称为视窗。 我举个简单的例子： 比如你使用放大镜去看清明上河.
html设置视口,浅谈移动端中的视口(viewport)的具体使用
weixin_42298507的博客
06-17 2123
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。本文主要讨论移动端中的视口。1....
HTML中viewport（APICloud-viewport）
qq_37899792的博客
03-25 628
viewport viewport 是由 Apple 公司为了让更多桌面网站可以在 safari 浏览器内正常显示而推出的解决方案，后被各大浏览器支持。 使用 viewport 可以自定义当前页面在浏览器中以何种分辨率显示。 而 APICloud 应用由于在引擎层做了多屏幕适配工作，如手动指定 viewport 为某个具体的数值时，可能会造成我们的应用页面显示变形。 在 APICloud ...
FirstWebPage:第一个网站项目-学习HTML
04-20
HTML5引入了`<meta name="viewport">`标签，以及CSS的媒体查询（Media Queries），使得网页可以根据不同设备的屏幕尺寸调整布局。 十、HTML5新特性 HTML5引入了许多新元素，如`<header>`、`<footer>`、`<article>`...
第4周
02-16
在第四周的学习中，我们将深入探讨HTML（HyperText Markup Language），这是构建网页内容的基础语言。HTML允许我们将文本、图像、视频等元素组织成结构化的页面布局，并与CSS和JavaScript一起，构成了网页开发的三大...
WEB2.0十二天标准教程
06-27
#### 十三、自适应高度 - **概念**：使容器的高度自动适应其内容的高度。 - **实现方法**：使用CSS的`display: flex`或`display: grid`属性，结合`min-height`属性来实现。 #### 十四、不用表格的菜单 - **传统...
html语言快速查询
03-26
HTML5引入了`<meta>`标签的`viewport`属性，以及`<div>`的`class`可以绑定CSS媒体查询，实现不同设备上的适配。 九、HTML5新特性 HTML5添加了许多新元素，如`<header>`、`<footer>`、`<article>`、`<section>`等，...
HTML meta viewport属性详细说明
12-10
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” cont
html5开发之viewport使用
11-21
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍： 复制代码代码如下: <!– html document –> <meta name=”viewport” content=” height = [pixel_value | device-height] ,
jquery.get_viewportSize:获取html元素的宽度和高度。 对于触摸设备，这是“视口”
05-29
jquery.get_viewportSize 获取视口的宽度和高度。 主页： : 版权所有2015 nexxar / Thomas Fellinger 许可证GPLv2 返回包含数字（像素）的宽度和高度的对象
HTML5中meta viewport 的用法
Liuqz2009的专栏
04-24 1万+
移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。 在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRa...
html viewport w3c,移动前端第一弹：viewport详解
weixin_39581571的博客
06-18 215
移动前端第一弹：viewport详解前言这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。但其实它一点也不新奇，不复杂。viewport简介没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为。该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。...
Webapp meta标签解决移动缩放的问题
bangman4009的博客
04-23 1024
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/&...
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
关于HTML5中meta name=“viewport“ 的用法
热门推荐
自然醒
11-01 7万+
vieport，移动端布局
HTML中网页缩放配置mete-viewport
最新发布
JackieDYH的博客
01-04 1096
标签的作用是为了确保网页在移动设备上以设备宽度为基准进行显示，同时限制了初始和最大的缩放级别，允许用户手动缩放，并禁止自动缩小适应。这有助于提供更一致和可控的移动端用户体验。视口是用户在网页上看到的可见区域，而这个标签的目的是为了确保网页在各种设备上能够以合适的方式显示。这是一个用于设置网页视口（viewport）的HTML。
html viewport
09-09
### 回答1： HTML视口（Viewport）指的是网页在浏览器中显示的区域，它通常是指浏览器窗口内的可见区域。视口的大小会随着浏览器窗口的大小而改变。在HTML中，可以通过meta标签来设置视口的大小、缩放比例以及禁止缩放等属性，以适应不同的设备和屏幕大小。通过合理设置视口属性，可以使网页在不同的设备上以最佳的显示效果呈现，提高用户体验。 ### 回答2： HTML视口（viewport）是指浏览器中用于显示网页内容的窗口大小。在移动设备上，由于屏幕尺寸较小，需要对网页内容进行适配以便用户能够更好地浏览和使用。这时候我们就可以通过设置HTML的viewport来实现适配。 通过在HTML的头部加入以下meta标签可以设置viewport的各种属性： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 其中，width表示设备宽度，device-width表示设备的实际宽度。initial-scale表示初始缩放比例，1.0表示不进行缩放，即以1:1的比例显示网页内容。 除此之外，还可以使用其他属性来进行更精确的设置，如： - user-scalable：指定用户是否可以手动缩放网页，默认值为yes，表示可以缩放； - minimum-scale：设置最小缩放比例； - maximum-scale：设置最大缩放比例； - height：设备高度，device-height表示设备的实际高度。 通过设置不同的viewport属性，我们可以实现网页内容在移动设备上的自适应，使得用户无论在任何尺寸的设备上都能够方便地浏览和使用网页。同时，通过限制缩放比例和设备尺寸，还可以保证页面在不同设备上的显示效果和布局的一致性。 总之，HTML视口是用来设置移动设备上网页内容展示的窗口大小。通过设置不同的属性，我们可以实现网页在不同设备上的自适应，提供更好的用户体验。 ### 回答3： HTML 的 viewport 是指浏览器中用于显示网页内容的可视区域。viewport 的大小随着浏览器窗口的大小改变而改变。 在移动设备上，viewport 是一个特殊的概念。因为设备的屏幕尺寸有限，而网页通常设计和开发是基于更大的桌面屏幕尺寸。为了适应不同设备的宽度，移动设备的浏览器必须对网页进行缩放和适配。 为了解决这个问题，HTML5 引入了 viewport meta 标签。我们可以通过在网页头部添加以下代码来设置 viewport： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 上述代码中，width=device-width 表示 viewport 的宽度应该等于设备的宽度。initial-scale=1.0 表示页面的初始缩放比例为 1.0。 通过设置 viewport ，我们可以确保网页在不同设备上显示一致，并且适应设备的屏幕尺寸。这对于移动设备上的用户体验至关重要。 另外，viewport 还可以控制网页的缩放行为。通过在 viewport meta 标签中设置 user-scalable=no ，可以禁用用户对页面进行缩放操作。 总之，HTML 的 viewport 是指浏览器中用于显示网页内容的可视区域。通过设置 viewport meta 标签，我们可以对网页的宽度、缩放行为等进行控制，以实现在不同设备上的适配和一致的显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值