Question

我的iPhone的RWD有问题。似乎每个iPhone都忽略了我的媒体查询标签。在Chrome，Android和Windows Phone上一切正常，但在iPhone上一切都很糟糕。怎么可能？

我的头部有这个标签：

@media only screen
@media min-device-width

我也试过

@media screen and (min-width: 220px) and (max-width: 480px)
{

    html
    {
        height: 100%;
    }

    #header .saturn
    {
        width: 100%;

        margin-top: 35px;

        display: block;
        text-align: center;

        animation: rwdScaleSaturn 2s linear infinite;
        -webkit-animation: rwdScaleSaturn 2s linear infinite;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

    #header .header-nav
    {
        margin: 0;

        display: block;
        text-align: center;
        float: none;
    }

    #header .header-nav ul
    {
        width: 100%;
        text-align: center;
    }

    #about .cloud.x1
    {
        display: none;
    }

    #about .cloud.x2
    {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

    #about .cloud.x3
    {
        display: none;
    }

    #about .cloud.x4
    {
        display: none;
    }

    #about .cloud.x5
    {
        display: none;
    }

    #about .cloud.x7
    {
        right: 35%;
        top: 10%;

        animation: rwdAnimation 2s linear infinite;
        -webkit-animation: rwdAnimation 2s linear infinite;
    }

    #about .rocket
    {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);

        margin-bottom: 15px;
        left: 80px;
        bottom: 50px;
    }

    #about .about-description
    {
        margin: 0;
        font-size: 12px;

    }

    #about .plane
    {
        display: none;
    }

    #about .ship
    {
        bottom: 60px;
        margin-left: 15px;
    }

    #portfolio
    {
        min-height: 400px;
    }

    #portfolio .title
    {
        padding-top: 15px;
        margin-bottom: 20px;
    }

    #contact .contact-description
    {
        font-size: 14px;
        margin-bottom: 25px;
    }

    #contact .mail
    {
        margin-bottom: 10px;
    }

    #contact .shark
    {
        transform: scale(0.8);
    }

}

没什么。这是我的完整代码：

class MyForm extends Component {
  // Hijack submit to add published flag
  handlePublish = (e) => {
    e.preventDefault();

    const { handleSubmit, onSubmit } = this.props;
    handleSubmit((values) => {
      onSubmit({
        ...values,
        isPublished: true,
      });
    })();
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <Field
          name="foo"
          component="input"
        />

        <button
          type="submit"
          onClick={this.handlePublish}
        >
          Publish
        </button>

        <button type="submit">
          Save
        </button>
      </form>
    );
  }
}

Answer 1

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

@media only screen and (min-width: 220px) and (max-width: 480px){
    body{
        background:red;
    }
}

Answer 2

所以，我明白了。我为特定的iPhone创建了单独的样式文件，并将其链接到html。一切正常。

媒体查询不适用于iPhone

2 个答案: