Swift: медиазапросы не соблюдаются в WKWebView - PullRequest
Новая
       0

Swift: медиазапросы не соблюдаются в WKWebView

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

Я пытаюсь написать режим чтения для моего приложения iOS, которое использует WKWebView, добавленное как подпредставление к viewController. Однако моя реализация, похоже, игнорирует медиазапросы внутри css.

У меня есть локальный html файл в приложении, который действует как шаблон, и css выглядит так: 

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

        @media only screen and (min-device-width: 560px) {
            body {
                max-device-width: 520px;
                margin: 20px auto;
            }
        }

    </style>
</head>

Целью является центрирование контента с максимальной шириной 520 пикселей, как в любом веб-дизайне ответа, если он отображается на большом экране (ie iPad). Тем не менее, моя реализация все еще простирается от края до края.

Я также попытался использовать min-width и max-width вместо вышеуказанных min-device-width и max-device-width, но все же дал тот же результат.

Обратите внимание, что вышеупомянутые медиазапросы ведут себя правильно, если отображается в браузере, но почему-то не в WkWebView.

EDIT

Смотрите скриншот при отображении на симуляторе iPad 12.9. Я использую splitViewController и замечаю, что текстовое содержимое все еще распространяется по краям. Это определенно больше, чем 520 пикселей. enter image description here

1 Ответ

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

Только что попробовал ваш код, используя min-width и max-width, которые отлично работали для текста, но для img / других элементов вам, вероятно, нужно определить их один за другим. Дайте мне знать, если это решит вашу проблему. 

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          @media only screen and (min-width: 560px) {
              body {
                  max-width: 520px;
                  margin: 20px auto;
              }

              img {
                  max-width: 520px;
                  height: auto;
              }
          }
      </style>
</head>

Только что подтвердил, что это также работает на splitViewController enter image description here

Попробуйте следующий код, и он должен работать: 

let string =
"""
<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          @media only screen and (min-width: 560px) {
              body {
                  font-size: 16px;
                  max-width: 520px;
                  margin: 20px auto;
              }

              img {
                  max-width: 520px;
                  height: auto;
              }
          }
      </style>
</head>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
"""
        myWKWebView.loadHTMLString(string, baseURL: nil)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...