Медиа-запросы в css не отображаются должным образом, когда мы делаем масштабирование в приложении ipad landscape angular - PullRequest
Новая
       71

Медиа-запросы в css не отображаются должным образом, когда мы делаем масштабирование в приложении ipad landscape angular

0 голосов
/ 30 апреля 2020

Когда я пытаюсь ущипнуть и увеличить масштаб в Ipad Landscape css медиа-запросы не отражаются.

Первоначально в альбомной ориентации внутренняя ширина экрана равна 1024, и она принимает медиа-запросы min-width : 900px (красный цвет) отображается. Но когда я делаю масштабирование в Ipad Safari, window.innerWidth изменяется до значения ниже 899 px, но цвет остается красным, а не синим (медиа-запрос ie max-width: 899px не отображается в ipad)

Что должно произойти: Когда я сжимаю и масштабирую, если ширина меняется на 899px или меньше, цвет фона должен измениться на синий.

примечание: в настольных браузерах медиа-запросы меняются соответствующим образом без проблем. Пожалуйста, проверьте ниже изображения с Ipad.

внутренняя ширина 1024 px

внутренняя ширина 814 px

index. html

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

app.component.ts 


    import { Component, HostListener } from '@angular/core';
    import { zoomLevel } from "zoom-level";


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'my-app';
      size = window.innerWidth;
      zoomLevel: any;
      zoomLevelIn: number;
      constructor() {
        this.zoomLevel = zoomLevel();
      }

      @HostListener('window:resize')
      change() {
        this.size = window.innerWidth;
        this.zoomLevelIn = zoomLevel();
      }
    }

app.component.s css Устанавливает цвет фона по ширине 

      @media (max-width: 899px)  {
    .test {
        background-color: blue;
    }
    }
    @media (min-width: 900px)  {
        .test {
            background-color: red;
        }
        }

app.component. html

    <div style="text-align:center" class="test">
      <h1>
        Welcome to {{ title }} {{size}} --- {{zoomLevelIn}} -- {{zoomLevel}}
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>

    <router-outlet></router-outlet>
...