适合所有移动设备的 1185 像素（无响应）标记答案

【问题标题】：Fit 1185px (Non Responsive) Mark-Up on all Mobile devices适合所有移动设备的 1185 像素（无响应）标记
【发布时间】：2014-12-06 10:05:30
【问题描述】：

我正在开发一个宽度为 1185 像素（无响应）的标记。如何在所有手机和平板电脑上适应这个宽度？如果我将宽度更改为 960 像素，但它不适合 1185 像素，它会起作用。请帮忙！

谢谢

<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TV2V</title>
<meta name="description" content="">
</head>
<body>

    <div style="background:red; width:1185px; height:200px; margin:auto;">        
        Testing
    </div>

</body>
</html>

【问题讨论】：

如果它没有响应，它永远不会适合所有手机和平板电脑。
这可以通过使用视口元标记来控制。 (webdesignerwall.com/tutorials/…)。但如果宽度超过 960 像素，它就不起作用。
你最好还是使用@huncyrus的建议
这个东西需要在不使用媒体查询的情况下进行整理
<div style="background:red; width:1185px; height:200px; margin:auto;"> Testing </div> 你的 div 标签设置了固定宽度 - 所以即使在移动设备上它也会尝试占用该宽度空间。如果你有这样的固定宽度，它就无法响应

标签： html css responsive-design

【解决方案1】：

尝试在 css 中使用简单的媒体查询。例如这些典型：

    /* xs */
@media screen and (max-width: 767px){

}
/* sm */
@media screen and (min-width: 768px){

}
/* md */
@media screen and (min-width: 992px){

}
/* lg */
@media screen and (min-width: 1200px){

}

请查看this 和this 关于它的文章。

【讨论】：

谢谢，但我不能使用媒体查询。这件事需要在不使用媒体查询的情况下进行整理。
哦，我明白了。一种使用 javascript 调整大小的可能方法。您应该询问窗口大小，然后修改 div 的样式属性。（如果你可以使用一些javascript）。或者不同的方式与 bootsrap 用于大表的响应方式相同。（将表格放入一个 div 中，它会滚动但溢出隐藏，并显示一些滚动条）

【解决方案2】：

<meta name="viewport" content="width=1185px, initial-scale=1">

把上面放在里面

<head></head>

你是不是错过了开始标签

<head>

和

<html>

【讨论】：