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

时间: 2024-06-16 22:07:55 浏览: 144

自适应布局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 http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">什么意思

相关推荐

html meta viewport属性说明

html网页中meta viewport属性说明

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

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

<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">是什么意思

解释下这段代码<!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>

<!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>

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

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

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

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

大数据1+x(蓝桥课堂实操231216）解析

阿里云的yum源，替换CentOS的yum源

最新推荐

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

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

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

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

大数据1+x(蓝桥课堂实操231216）解析

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

管理建模和仿真的文件

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

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

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