将视口元标记设置为 1300？答案

【问题标题】：Setting the viewport meta tag to 1300?将视口元标记设置为 1300？
【发布时间】：2013-01-27 07:06:54
【问题描述】：

我正在尝试修复我的网页设计中的一些页面，但遇到了一个问题，在我的常规桌面浏览器上看起来不错的侧边栏横幅广告似乎在 iPhone 和 Android 设备上显示“屏幕外”。通过将视口元标记设置为更高的值（例如 1300），问题似乎消失了。虽然没有发现任何副作用，但我很好奇将标签设置为这么高的值是否表明存在更大的设计问题？

<meta name="viewport" content="width=1300" />

【问题讨论】：

“将视口元标记设置为更高的值”是什么意思？请发布您的确切视口元标记。
我将其添加到问题中。感谢您的关注。

标签： html css mobile viewport

【解决方案1】：

你应该使用这个元标记：

<meta name="viewport" content="width=device-width">

例如，如果您在移动设备上查看您的网站，您的网站将会很小且无法查看。

<meta name="viewport" content="width=1300" />

你的元标签所做的就是告诉浏览器，

"无论本网站所在屏幕的宽度（视口宽度）将其渲染为 1300 像素宽的屏幕。”

如果您的视口小于 1300 像素，则会执行“缩小”，如果视口大于 1300 像素，则会执行“放大”。

现在，在我看来，如果您使用它来修复您的布局，您会遇到更大的问题。我强烈建议您将引导程序作为一种使您的布局响应的方式。 Bootstrap 是一个 css 文件库，您可以将其添加到您的站点中来做很多事情，其中之一就是创建一个流畅的、响应式的网格系统。

我建议从here 开始了解引导程序及其可以做什么，然后谷歌搜索一些文章。每个人都喜欢它！相信我，一旦你意识到它可以让你的生活变得多么简单，你也会爱上它的。

http://twitter.github.com/bootstrap/index.html

【讨论】：

谢谢，我并没有真正“修复”视口的布局，而是试图让整个屏幕显示在手机上。我现在意识到没有适当缩放信息的响应式设计是一个错误，但是，我不确定在我正在开发的地方修复它会有多容易。您是否有过“引导”现有网站的经验？
是的。它实际上制作是为了使现有网站具有响应性。
将此问题标记为已回答。使用您的 html 结构的实际示例开始一个新问题，并在将现有站点转换为响应式引导程序时寻求正确方向的指针。我会写下我自己对过去所做的事情的看法，我相信其他人也会加入进来。
我现在正在做的是更改 Bootstrap Less 变量以更改“流动排水沟宽度”，即列之间的空间。一旦我得到它的工作，我会在我的问题上发布我的发现。当你到达那一点时一定要检查一下：stackoverflow.com/questions/14823742/…