Question

请使用智能手机查看link，您可以看到它有点偏离。我把所有内容都集中在桌面上，但在智能手机中没有网页（我使用的是iPhone 5S）。有什么方法可以让它像任何类型的智能手机的桌面？有什么方法可以让它看起来像Gmail应用程序，你无法在任何地方滚动？

我已完成所有调整，如head标记中的以下代码。但它不起作用。如果您需要在桌面中查找，请点击以下网址：https://johnny00520.github.io/Test.git.io/

非常感谢你。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

<title>MindScribe</title>
<!--<meta name="description" content="An interactive getting started guide for Brackets.">-->

<!-- Maybe I need. Note that Android and iOS ignore media="handheld"-->
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">

<!--smartphone conpatible-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<!-- Home screen icon -->
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">

Answer 1

尝试以下方法：

将以下CSS属性添加到body：

box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;

box-sizng - 宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距。

溢出 - 阻止滚动。

填充＆amp;边缘重置只是为了清理浏览器生成的任何额外空间。

这会将你的#cursive标题提升一点，但是你可以告诉我们（调整你的利益）：

margin: 4em 0 1em;

您可以选择仅在移动视口的@media查询中添加以上内容，可能类似于（为您的利益调整价值）：

@media (max-width: 768px) {
  body {
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
    padding: 0;
    /* etc */
  }
}

如何让我的网络适合任何智能手机？

1 个答案: