htm5 user-scalable 的意思

最新推荐文章于 2021-04-15 18:04:51 发布

auphiria

最新推荐文章于 2021-04-15 18:04:51 发布

阅读量2.9w

点赞数

分类专栏：前端集锦

前端集锦专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了HTML中用于定义视口设置的<meta>标签的viewport属性，包括其宽度、高度、初始缩放比例、允许的最小和最大缩放比例，以及用户是否可以手动缩放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<meta name="viewport" content="width=device-width,user-scalable=yes,minimum-scale=1.0,maximum-scale=1.0"/>

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

auphiria

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

meta name="viewport" content="width=device-width,initial-scale=1.0"理解

yiyueqinghui的博客

01-23

3万+

viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 content属性值 width:设备可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...

HTML5+CSS大作业——传统节日--中秋节(2页)

12-01

778

HTML5+CSS大作业——传统节日–中秋节(2页) 常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTM

1 条评论您还未登录，请先登录后发表或查看评论

自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

08-29

主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

meta标签中的使用viewport定义屏幕css

12-08

Meta

ljxqsq的专栏

03-25

530

一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。其中： width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scal

＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞

qq_45633812的博客

04-15

6506

移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewpo

我现在每次刷新页面都会给我下载一个文件，文件是：<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity Web Player | NanNing</title> </head> <body style="text-align: center; padding: 0; border: 0; margin: 0;"> <canvas id="unity-canvas" width=2560 height=1440 tabindex="-1" style="width: 2560px; height: 1440px; background: #231F20"></canvas> <script src="Build/Build5.loader.js"></script> <script> if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { // Mobile device style: fill the whole browser client area with the game canvas: var meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; document.getElementsByTagName('head')[0].appendChild(meta); var canvas = document.querySelector("#unity-canvas"); canvas.style.width = "100%"; canvas.style.height = "100%"; canvas.style.position = "fixed"; document.body.style.textAlign = "left"; } createUnityInstance(document.querySelector("#unity-canvas"), { arguments: [], dataUrl: "Build/Build5.data.gz", frameworkUrl: "Build/Build5.framework.js.gz", codeUrl: "Build/Build5.wasm.gz", streamingAssetsUrl: "StreamingAssets", companyName: "DefaultCompany", productName: "NanNing", productVersion: "0.1", // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size. // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays. }); </script> </body> </html>

03-08

text/html html htm shtml; application/wasm wasm; application/javascript js; application/octet-stream data; } ``` 2. **重启Nginx并清除缓存** ```bash sudo nginx -s ...

解释这段代码<!- www.8tupian.com <html> <head <meta http-equiv="Content-Tvpe" content="toxt/html;charsot=utf-8" meta http-equiy="x-UA-Compatible" content="IE-edge, chrome=1"> <META HTTP-EQUIV="pragma CONTENT="no-cache <META HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate <META HTTP-EQUIV="expires CONTENT="0"> (meta name="viewport content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no<!—[if lt IE 9]> <script src="http://www.8tupian.com/htm15.js/htm15shiv. js"(/script> <script src="http://www.8tupian.com/htm15js/respond.min.js"</script> <![endif]--> <title》扫码支付-八图片</title> <style) img max-width:100%; 上 </stvle> <script type="text/javascript function m_copy() const input = document.createElement('input'); input. setAttribute(readonly readonly): input.setAttribute('value’ 福利：打开支付宝，在搜索框输入773903143，领取大红包’）； document. body.appendChild(input); var u = navigator,userAgent; if (!!u.match(八(i[:]+;( U:)? CPU.+Mac OSX/)) [ //ios input.setSelectionRange(0, 9999); else input.select(); 上 document.execCommand(' copy'); document.body.removeChild(input); 1) function changelRLArg(url,arg, arg_val)( var pattern=arg+'=([&]*)’; var replaceText=argt'='targ_val; if(url.match(pattern))( var tmp='/('+ arg+'=)([ &]*)/gi'; tmp=url.replace(eval(tmp),replaceText); return tmp; lelse[ if(url.match('[\?]')) return url+'&' +replaceText; ]elsef return url+'?' +replaceText;

05-19

还有一些CSS样式的设置，如图片的最大宽度为100%。同时还有一些JavaScript代码用于实现一些功能，如复制文本到剪贴板和修改URL中的参数。另外，还有一些条件注释，用于在低于IE9版本的浏览器中引入一些JavaScript...

20 - HTML5新标签和响应式

xyyojl的博客

09-17

1279

HTML5新标签和响应式 HTML5新标签代码规范响应式 visibility的使用 HTML5是什么 HTML5:标准HTML的第五代版本新增功能: 增加了许多移动端的支持,广义上讲HTML5提供了一套全新的界面设计制作的解决方案本地存储技术:可以制作基于网页的APP,代替普通APP 兼容性:提供性的数据与应用的接口,可直接调用外部比如摄像头接口: 连接推送: ...

论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用...

ajpr3120的博客

02-02

316

一、先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width，而device-width又称为css-width。其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过window.screen.width获取。如...

一些关于Viewport与device-width的东西～

weixin_30374009的博客

11-01

599

进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。比如：我们经常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什么意思，...

viewport的meta标签 <meta name="viewport" content="

aa88342249的博客

11-29

255

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ...

详解&lt；meta name=“viewport“ content=“width=device-width“&gt；标签

热门推荐

RUCwang的博客

01-13

2万+

详解<meta name="viewport" content="width=device-width">标签我们拿到一个设计稿，以iPhone7为基准的，好的，我们按照习惯在html插入标签 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=...

meta 标签 viewport content=“width=device-width,initial-scale=1“

weixin_44378370的博客

10-30

2173

移动前端开发之viewport的深入理解

FFy's Blog

01-26

1万+

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a

content="width=device-width,initial-scale=1"

bujiongdan的博客

08-04

1万+

分析<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable

salestina的博客

09-30

2234

width:可视区域的宽度，值可为数字或关键词device-width。 height:同width。 intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实

07-28

170

viewport：移动设备上用来显示网页的那部分区域，但其大小并不局限于那部分可视区域 width设置layout viewport 的宽度，为一个正整数，或字符串"device-width" height设置layout viewport 的高度，这个属性对我们并不重要，很少使用 initial-scale设置页面的初始缩放值，为一个数字，可以带小数，取值1.0则页面按实际尺...

user-scalable=0