Html / css在移动设备上损坏

Question

如何让导航栏在移动设备中不中断？

Github存储库：https://github.com/Hampusm/hampusm.github.io

的CSS：

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: monospace
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@viewport {
  zoom: 1.0;
  width: device-width;
}

<div class="navbar">
  <a><b>HampusM</b></a>
  <a href="http://hampusm.github.io">Home</a>
  <a href="repositories.html">Repositories</a>
  <a href="contact.html">Contact</a>
  <embed style="float:right" , src="switch.svg" width="50" type="image/svg+xml" />
</div>
<div class="main">
  <center>
    <br>
    <h1>Home</h1>
    <br>
    <!-- this br is meant to not end with a > -->
    <br <div class="btn-group">
    <a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
    <a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
    <a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>

正如你所看到的，我确实使用@viewport但它仍然会中断。

是的，我尝试使用谷歌搜索，但我可以找到答案。

关于它在桌面上的外观的图像

关于它在Mobile上的外观的图像

Answer 1

将嵌入移出导航栏。将它放在你想要的地方

＆＃13;

＆＃13;

body {
  margin: 0;
}

embed {  position:absolute; top:0; right:0}

.navbar {
  overflow: hidden;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: monospace
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@viewport {
  zoom: 1.0;
  width: device-width;
}

＆＃13;

<div class="navbar">
  <a><b>HampusM</b></a>
  <a href="http://hampusm.github.io">Home</a>
  <a href="repositories.html">Repositories</a>
  <a href="contact.html">Contact</a>
</div>
<embed src="switch.svg" width="50" type="image/svg+xml" />
<div class="main">
  <center>
    <br>
    <h1>Home</h1>
    <br>
    <!-- this br is meant to not end with a > -->
    <br <div class="btn-group">
    <a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
    <a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
    <a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>

＆＃13;

＆＃13;

＆＃13;