<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

时间: 2023-11-11 12:26:26 浏览: 79

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

自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结在移动客户端手机页面布局中，meta标签的使用非常重要，今天我们将详细介绍meta标签中的几个关键属性，包括viewport、content、width、initial-scale、minimum-scale、maximum-scale，并解释它们在自适应布局中的作用和适用场景。一、 phys.width 和 device-width 在移动客户端手机页面布局中，我们经常使用phys.width和device-width这两个概念。phys.width是指设备的物理宽度，而device-width是指CSS宽度。我们可以通过document.documentElement.clientWidth获取phys.width，而通过window.screen.width获取device-width。例如，iPhone 6的phys.width为750px，而device-width为375px。二、浏览器默认行为我们知道，浏览器默认情况下会将电脑端的网页展现在手机屏幕上，但这会导致横向滚动条的出现。为了解决这个问题，浏览器会默认一个虚拟窗口，虚拟窗口的宽度是固定的，例如Safari iPhone为980px、Opera为850px、Android WebKit为800px、IE为974px。然后，浏览器会将这个虚拟窗口装进手机屏幕上，这样就会导致页面缩放和字迹变小。三、 meta 标签中的width属性在meta标签中，width属性有两个含义：一是phys.width，二是虚拟窗口的width。例如，使用meta name="viewport" content="width=device-width"时，width既可以是phys.width，也可以是虚拟窗口的width。这样就会出现两个结果：一是iPhone 6的phys.width变成了css-width，即375px；二是虚拟窗口的宽度也变成了375px，页面就不会缩放，也不会出现横向滚动条。四、响应式布局和媒体查询的影响 meta标签的使用也会影响响应式布局和媒体查询。例如，使用@media only screen and (min-width: 350px) and (max-width: 480px)时，如果没有meta标签，width当然是phys.width，iPhone 6不会执行括号里的代码。但是，如果使用meta标签，width变成了css-width，即375px，那么iPhone 6就会执行括号里的代码。五、 meta标签的影响从上面的分析可以看出，meta标签的使用可以使原本的iPhone 6按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。这意味着，开发者可以不管手机的像素比，只需按照css像素编写代码即可。 meta标签中的viewport、content、width、initial-scale、minimum-scale、maximum-scale等属性在自适应布局中的作用和适用场景非常重要，开发者需要根据实际情况选择合适的属性来实现自适应布局。

这段代码是用于网页开发的，其作用是： - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：设置网页的视口（viewport），即网页在移动设备上显示的大小和缩放比例。其中，`width=device-width` 表示视口的宽度为设备的宽度，`initial-scale=1.0` 表示网页的初始缩放比例为 1。 - `<meta http-equiv="X-UA-Compatible" content="ie=edge">`：设置浏览器的兼容性模式。其中，`X-UA-Compatible` 是一个 HTTP 头部指令，`content="ie=edge"` 表示强制使用当前浏览器最新的渲染模式（Edge 模式）。

阅读全文

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

相关推荐

html网页中meta viewport属性说明

BootStrap制作导航条实例代码

<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">是什么意思

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">什么意思

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style>

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>在线书店</title> </head>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html快速入门</title> </head> <body> HTML图片 </body> </html>请问这段代码有何问题

解释下这段代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <title>Document</title> </head>

SL-ST 差速器3D模型 SL-ST 差速器

C#大型药品进销存管理系统源码数据库 Access源码类型 WinForm

最新推荐

SL-ST 差速器3D模型 SL-ST 差速器

C#大型药品进销存管理系统源码数据库 Access源码类型 WinForm

JAVAKTV点歌系统源码数据库 MySQL源码类型 WinForm

树叶形状、分布与树枝结构关系及其质量估算模型研究

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"