html meta标签 viewport相关

最新推荐文章于 2021-07-02 18:33:32 发布
最新推荐文章于 2021-07-02 18:33:32 发布
阅读量193 收藏
点赞数
文章标签： meta html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu1628299958/article/details/115316657
版权

html meta标签 viewport相关

<!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
    评论
HTML中meta=“viewport”的介绍
diji8584的博客
08-07 2017
viewport就是浏览器上用来显示网页的那部分区域 layout viewport:整个网页所占据的区域（包括可视也包括不可视的区域） 默认的 visual viewport:网页在浏览器上的可视区域（浏览器中能够看见的区域） ideal viewport:ideal viewport是一个能完美适配移动设备的viewport（没有固定尺寸，就是屏幕的宽度） <...
html meta viewport属性说明
12-13
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content
HTML meta viewport属性详细说明
12-10
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” cont
css3响应式设计
sixteen_cicle的博客
10-26 438
说明：手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中 width     设置layout viewport  的宽度，为一个正整数，或字符串"width-device" initial-scale     设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale     允许用户的最小缩放值，为一个数字，可以带小数 maximum-scal
meta标签viewport的深入理解（转）
u010227042的博客
07-02 2387
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限
HTML meta viewport介绍
chuwang1685的博客
06-13 192
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏...
html中meta标签及用法详解
12-14
Html中meta标签 一、meta标签 含义 　<meta> 元素 可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 　<meta> 标签位于文档的头部，不包含任何内容。 　<...
html网页中meta viewport属性说明
12-13
HTML meta viewport属性说明 什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： 复制代码代码
移动端html5 meta标签的神奇功效
12-14
制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的... 1、Meta 之 viewport 说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？ viewport即可视区域，对于桌面浏览器而言，vie
meta中的viewport
北冥有鱼
07-08 279
初学bootstrap的小白鼠记的一点笔记。点击打开链接 一、目的：使网页中的内容方便用户在手机端观看 二、viewport的基本作用 1、设置窗口宽高（width、height） 2、放大缩小比例（user-scalable） 3、控制用手机放大缩小的最大倍数(maxinum-scale,mininum-scale) 三、使用方法 头部添加viewport标签。 例：maxinu
html meta viewport总结
Candx2的博客
09-14 496
移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中： width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum
html5页面视图meta,html网页中meta viewport属性说明
weixin_29901515的博客
06-03 245
HTML meta viewport属性说明什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中，通常这个虚拟的“窗口”(viewport)比屏幕宽，这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让...
meta中viewport属性
qq_43394194的博客
10-12 549
viewport 是meta标签name属性的一个值。 基本用法 User-scalbale=0 设置禁止用户缩放 width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） height：高度（数值 / device-height）（范围从223 到10,000） initial-scale：初始的缩放比例 （范围从&gt;0 到10） mini...
meta标签viewport详解
chelen_jak的专栏
08-15 1115
转自：http://blog.csdn.net/rogerjava/article/details/17142955 1.什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的
移动端适配 - HTML meta viewport属性说明
ld395353765的博客
05-28 2018
利用meta标签对viewport进行控制 　 移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。 　　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中： <meta name="viewport" conte...
meta viewport的使用
dexing07的博客
11-02 882
meta viewport作用： 因为现在移动设备的PC的不同，也代表着不同浏览器的可视区域也是不同的。 而且还有一点，CSS中的1px不等同于每个设备的1px，也就是说每个设备的分辨率不同会影响到所在网页的显示大小 最重要的是用户缩放也会影响到显示的网页的效果。 而meta viewport就是为了解决以上问题的。 什么是缩放？个人理解是用户在移动端主动改变屏幕伸缩大小（放大，缩小）的行为。先入
meta viewport简介
07-26 1449
viewport概念 viewport就是浏览器上用来显示网页的那部分区域。viewport分为三种： layout viewport 整个网页所占据的区域 visual viewport 网页在浏览器上的可视区域 ideal viewport ideal viewport是一个能完美适配移动设备的viewport ideal viewport并没有一个固定的尺寸，不同的设...
meta name = viewport
笑望灬星辰
03-30 522
meta name = viewport <meta name="viewport" content="..." /> // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数 // minimum-scale 允许⽤户最⼩缩放
html移动端meta viewport
最新发布
09-10
这个meta标签指示设备使用与设备屏幕宽度相等的视口宽度，并且初始缩放级别为1.0。这样可以确保网页在不同设备上以适合屏幕宽度的方式显示，并且不会进行默认的缩放。 通过设置`width=device-width`，可以使得视口...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值