Question

我编辑了我的网站的css以使其响应，但与我的电脑相比，它在手机上看起来完全不同。

This is a screenshot from built-in firefox responsive design view

This one comes from my phone. It looks more stretched, especially when you look at text

对页面责任负责的CSS代码：

@media screen and (max-width:1300px) {

  .wrapper {
    width: 100%;
  }

  .header {
    width: 100%;
    padding: 40px 0;
  }

  .logo {
    zoom: 0.7;
    -moz-transform: scale(0.7);
    padding: 30
    margin-left: auto;
    margin-right: auto;
  }

  .logo > img {
    margin-left: auto;
    margin-right: auto;
  }

  .nav {
    width: 100%;
    /*font-size: 60px;*/
    padding: 10px 0;
    background-color: #30415d;
    text-align: center;
    border-top: 1px solid #8eaebd;
    border-bottom: 1px solid #8eaebd;
  }

  ol {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 20px;
    height: auto;
    line-height: 200%;
    display: inline-block;
  }

  ol > li {
    float: left;
    width: 150px;
    /*height: 50px;*/
    border-right: 1px solid #8eaebd;
  }

  .content {
    width: 95%;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-top: 10px;
  }

  .socials {
    width: 100%;
    text-align: center;
    background-color: #292929;
  }

  .socialdivs {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .fb {
    width: 25%;
    height: 155px;
    float:left;
  }

  .yt {
    width: 25%;
    height: 155px;
    float:left;
  }

  .tw {
    width: 25%;
    height: 155px;
    float:left;
  }

  .gplus {
    width: 25%;
    height: 155px;
    float:left;
  }

  .

}

我试图将字体增加到手机屏幕上看起来更大而没有效果。我还尝试添加<br>标记来分隔这句话，但文字在手机上看起来仍然很小。

Answer 1

尝试将此添加到您的html头

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta viewport元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。

width=device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。

该部分设置浏览器首次加载页面时的初始缩放级别。

与我的电脑相比，我的手机在手机上看起来略有不同

1 个答案: