Internet Explorer 中的响应式设计答案

【问题标题】：Responsive design in Internet ExplorerInternet Explorer 中的响应式设计
【发布时间】：2017-10-31 18:18:20
【问题描述】：

我已经建立了一个响应式设计的网站。在 Chrome、Mozilla Firefox、Opera 中一切正常，但 Internet Explorer（也是 10,11 版）在台式电脑中显示平板电脑版本。如何强制 IE 使用桌面版？先感谢您。媒体查询如下：

@media only screen and (min-width: 481px) {}\\ for Tablet
@media only screen and (min-width: 769px) {} \\for Desktop PC

【问题讨论】：

您需要额外的 IE 代码：msdn.microsoft.com/en-us/library/hh869615(v=vs.85).aspx
IE 10 和 11 支持媒体查询。您能分享一下包含这些媒体查询的 CSS 吗？
@Gerard，感谢您的努力。我在您的链接中尝试了解决方案，但无法使其正常工作。对于屏幕 min-width:481px 我应该添加 @-ms-viewport { width: 481px; }。对吗？
@j-printemps，媒体查询如上面css中所述。你需要整个css文件吗？太长了，怎么分享给大家？
一个样本可能就足够了。另外，你能告诉我们你的<meta name="viewport"是什么吗？

标签： html css internet-explorer responsive-design

【解决方案1】：

以下代码在所有浏览器中加载 mystyles.css，仅在 Internet Explorer 8 中加载 complex.css：

<link rel="stylesheet" media="screen and (min-width:600px)" href="mystyles.css" />

<!--[if (IE 8)]>
<link rel="stylesheet" media="screen" href="complex.css" title="complex layout" />
<![endif]-->

【讨论】：

我应该为 Internet Explorer 使用单独的 css 文件吗？而且这个代码必须在每个页面中？
ITs 添加头文件
当我将此字符串添加到标题时，它在移动设备上无法正确显示