即使在移动设备上也能强制桌面视图答案

【问题标题】：Force desktop view even on mobile即使在移动设备上也能强制桌面视图
【发布时间】：2018-07-06 09:50:17
【问题描述】：

我查看了所有其他类似的问题，但找不到答案。所以首先我是编程的菜鸟，我刚开始学习 CSS。我用这些代码做了一个页面：

<html>
<style>
    body {
    p.Welcome {
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-size: 23px;
      font-weight: bold;
      color: white;
      text-align: center;
    }
    section {
      border-radius: 1em;
      padding: 1em;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%)
    }
</style>
<section>
  <p class="Welcome">hi</p>
  <img src="blablabla whatever image" />
</section>


<html/>

即使在移动设备上，我也想强制使用桌面版本，就像即使当我用移动设备打开该页面时，相同的页面也必须显示在分辨率和其他内容上没有变化。

【问题讨论】：

stackoverflow.com/questions/31334481/…
你在使用一些前端框架吗？
我尝试了上面链接中的答案，但没有奏效。既不是元端口视图也不是那个脚本。顺便说一句，我不知道那个前端框架是什么，我只是在用记事本++和浏览器练习。大声笑
那么没有'dektop'\'browser'视图，你只有一个视图
当我使用桌面时，一切看起来都很好，但是当我用手机打开同一个页面时，一切都变得一团糟。我不想花任何时间来解决这个问题，所以我只是在寻找一种解决方案来强制在移动设备上显示相同的视图（我不在乎这是否会被缩小甚至无法缩放）

标签： html css

【解决方案1】：

我在下面添加了一些 cmets，只是为了帮助您纠正 HTML 中的一些错误。您必须了解，像这样的错误很大程度上取决于浏览器的解释，每个浏览器可能使用不同的引擎或不同的方法，无法保证统一的结果。

已添加评论：

您不应使用空规则声明（位于 CSS 中的主体规则下）。
始终寻找结束标签。尝试使用 Sublime、VS Code 或 Atom，因为它们具有“问题”通知器，可以帮助您在学习时发现这些错误。（位于 CSS 中的 body 规则下）。
如果您的目标是响应能力，请尽量远离绝对定位，否则您将不得不通过媒体查询来获得相同的结果。（位于 CSS 中的 rull 部分下）。
打开的每个标签都必须关闭。特别是为了兼容性。每个浏览器都会以不同的方式处理这些错误，因此由浏览器决定结果，您不会在每个浏览器中看到相同的结果（位于 HTML 中的 body 结束标记上方）。
关闭 HTML 标记时，格式为 </html>。后面的斜线用于自闭合标签。（位于文档末尾）。

要更直接地回答您的问题，这很困难。您应该了解所有屏幕都有不同的尺寸和尺寸，您必须围绕这一点进行设计，没有例外。否则没有办法强制。如果您将元素设置为 800 像素的宽度，但屏幕的宽度为 324 像素，您将无法在屏幕上显示该元素。

所以我的回答是，您正在寻找一种方法来摆脱响应性设计，但您做不到。是的，这可能是很多工作，但你会随着你的发展而养成习惯。我也可以推荐freeCodeCamp，因为他们添加了一些极好的挑战来帮助教授新的实践以使您的项目更具响应性，以及盒模型等基础知识。

<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
  /* You should not use empty rule declarations */ body {}
  /* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */

  p.Welcome {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 23px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  section {
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    /* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
    top: 49%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
  <p class="Welcome">hi</p>
  <img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->

</html>

【讨论】：

这是无效的html
@smith 不想完全轰炸太多的变化，但你是对的。随意提出您认为对 OP 有益的任何其他编辑。另请注意，我使用的是移动设备。
我的朋友，你即将爱上一个叫做 Flexbox 的东西。说真的，每天在 freeCodeCamp 上接受 20 到 30 个挑战，你会得到很多这样的背景信息。请记住，在你被教导之前，你不知道你不知道什么，所以在编码方面完全自学是很困难的。 freeCodeCamp 在让你走上正确的道路方面做得很好。
非常感谢，我希望 Stackoverflow 中有更多像你这样的人......
欢迎任何改进此答案的 cmets，而不是盲目地反对。 :)