Html 即使在移动设备上也强制使用桌面视图_Html_Css

Html 即使在移动设备上也强制使用桌面视图

html css

Html 即使在移动设备上也强制使用桌面视图,html,css,Html,Css,我看了所有其他类似的问题，没有找到答案。首先，我是编程高手，我刚开始学习CSS。我用这些代码制作了一个页面： <html> <style> body { p.Welcome { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 23px; font-weight: bold; color: white; text-ali

我看了所有其他类似的问题，没有找到答案。首先，我是编程高手，我刚开始学习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/>

我想在移动设备上强制使用桌面版本，就像我用移动设备打开页面一样，同一页面必须在分辨率和其他内容不变的情况下显示。

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

补充意见：

您不应该在CSS中使用位于主体规则下的空规则声明。始终寻找结束标记。尝试使用升华、VS代码或Atom，因为他们有问题通知程序，可以帮助您在学习时发现这些错误。位于CSS中的主体规则下。如果你的目标是快速响应，试着远离绝对定位，否则你将不得不通过媒体查询获得相同的结果。位于CSS中的rull部分下。必须关闭打开的每个标签。特别是兼容性。每个浏览器都会以不同的方式处理这些错误，因此由浏览器决定结果，您不会在HTML中位于body closing标记上方的每个浏览器中看到相同的结果。关闭HTML标记时，格式为。后面的斜杠用于自动关闭标记。位于文档末尾。要更直接地回答你的问题，很难。您应该了解所有屏幕都有不同的大小和尺寸，您必须围绕这一点进行设计，没有例外。没有办法强迫别人这样做。如果将某个元素的宽度设置为800px，但屏幕的宽度为324px，则无法在屏幕上安装该元素

所以我的答案是，你正在寻找一种摆脱为响应性而设计的方法，但你不能。是的，这可能是一个很大的工作，但你会养成习惯。我也可以推荐一下，因为他们已经添加了一些优秀的挑战来帮助教授新的实践，使您的项目更具响应性，以及一些基础知识，如box模型

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

你在使用一些前端框架吗？我在上面的链接上尝试了答案，但都不起作用。既不是元端口视图，也不是该脚本。顺便说一句，我不知道前端框架是什么，我只是在练习使用notepad++和浏览器。lolthen没有“dektop”\“browser”视图，当我使用桌面时，你只有一个视图，一切看起来都正常，但当我用手机打开同一页时，一切都很混乱。我不想花任何时间来解决这个问题，所以我只是想寻找一个解决方案，在移动设备上强制使用相同的视图我不在乎它是否会被缩小甚至取消缩放这是无效的html@smith我不想太多的改变，但你是对的。请随意建议您认为对OP有益的任何其他编辑。同时请注意，我正在使用手机。我的朋友，您即将爱上一种叫做Flexbox的东西。说真的，每天在freeCodeCamp上挑战20-30次，你会得到很多这样的信息。记住，你不知道什么你不知道，直到你被教导，所以完全自学编码是困难的。freeCodeCamp在让您走上正确的道路方面做得非常好。非常感谢，我希望我们在Stackoverflow中有更多像您这样的人…………欢迎您提出任何改进此答案的意见，而不是盲目的否决票