Блог

Главная - Вопросы по программированию - Создание изображения на всю страницу в формате HTML для iPhone 6s Plus в горизонтальном режиме

Создание изображения на всю страницу в формате HTML для iPhone 6s Plus в горизонтальном режиме

#html #css #ios #iphone

#HTML #css #iOS #iPhone

Вопрос:

Я пытаюсь создать изображение на всю страницу, используя HTML / CSS для мобильных телефонов (что-то похожее на https://www.w3schools.com/howto/howto_css_full_page.asp ).

Я нарисовал ромб (на самом деле квадрат, повернутый на 45 градусов) и поместил его на HTML-страницу. Я ожидаю, что вершины ромба коснутся границы страницы. Вот мой код:

 <!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;
                                  maximum-scale=1.0; user-scalable=no">
  <title>FGFSControllerWeb</title>
  <style>
    * {
        box-sizing: border-box;
    }
    html, body {
        height: 100%;
    }
    body {
        margin: 0px;
        padding: 8px;
        overflow: hidden;   /* disable scroll */
    }
  </style>
</head>
<body>
  <img style="height: 100%; width: 100%" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QECCRksuz0/3gAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAV1SURBVHja7d1bblpBFEXB5sx/zuQvimLHwRjua9X tBTJhlU0RMC93e/3ZZvvdrt9/KH7YvuNm Ag9X/xcwPg vUzAEC9fgYA8LyfAQBi9TMAQP2xnwEA6s98GAAg/byfAQDS9TMAQL1 BgCo188AAPX6GQCgXj8DANTrZwCAev0MAFCvnwEA6vUzAEC9fgYAqNfPAAD1 hkAoF4/AwDU62cAgHr9DABQr58BAOr1MwBAvX4GAKjXzwAA9foZAKBePwMA1OtnAIB6/QwAUK fAQDq9TMAQL1 BgCo188AAPX6GQCgXj8DANTrZwCAev0MAFCvnwEA6vUzAEC9fgYAqNfPAAD1 hlIA1A/A10A6megC0D9DHQBqJ BLgD1M9AFoH4GugDUz0AXgPoZ6AJQPwNdAOpnoAtA/Qx0AaifgS4A9TPQBaB BroA1M9AF4D6GegCUD8DXQDqZ6ALQP0MdAGo/2gGAFB/2sBJD4FRv731rgFA/V4MAKB BgBQPwMAqJ8BANTPAADqZwAA9TMAgPoZAED9DACgfgbaANTPQBeA hnoAlA/A10A6megC0D9DHQBqJ BLgD1M9AFoH4Gdjcw6reygVG/lQ2M q1sYNRvZQOjfisbGPVb2cCo38oGRv1WNjDqt7KBUb VDYz6rWxg1G9lA6N KxsY9VvZwKjfygZG/VY2MOq3soFRv5UNjPqtbGDUb2UDo34rGxj1W9nAqN/KBkb9VjYw6reygVG/lQ2M q1sYNRvZQOjfisbGPVb2cCo38oGRv1WNjDqt7KBUb VDYz6rWxg1G9lA6N KxsY9VvZwKjfygZG/VY2cHv8H5idep8 0Hvst7SBm/qtbOCmfisbcAKYE4AB8xqAAavVv9aaI1yu3myX u/3 6wDXK7ebJf61  3QjBgwfrXn2 GY8Bq9a /3g7NgKXqXx8/EMOAdepfn34kkgGL1L/ 9aF4BqxQ//ria1EYsMvXv77 YiwG7Nr1r/9 NSIDduH61yNfjsuAXbX 9eDXozNgl6x/PX6BDAbsevWvb10iiQG7WP3ruxfJY8CuVP964jKpDNhl6l/PXSibAbtG/U8CYMCuUf/zABiwC9T/IwAM2Nnr/ykABuzU9b8AAAN23vpfA4ABO2n9LwPAgJ2x/lcCYMBOV/ LATBg56r/9QAYsBPV/xYADNhZ6n8XAAbsFPW/EQADdvz63wuAATt4/W8HwIAduf4tADBgh61/IwAM2DHr3w4AA3bA jcFwIAdrf6tATBgh6p/BwAM2HHq3wcAA o/SP27AWBA/Ueof08ADKh/9/p3BsCA vetf38ADKi/DoAB9dcBMKD OgAG1F8HwID66wAYUH8dAAPqrwNgQP11AAyovw6AAfXXATCg/joABtRfB8CA usAGFB/HQAD6n/Ln3CuX/eL4k/3h6jfCfCyc8BRoP4KAAbUXwfAgPrrABhQf/RFcOFecTs7AX56FDgH1F8BwID66wAYUH8dAAPqrwNgQP11AAyovw6AAfXXATCg/joABtRfB8CA usAGFB/HQAD6q8DYED9dQAMqL8OgAH11wEwoP46AAbUXwfAgPrrAMoG1A9A14D6AegaUD8AXQPqB6BrQP0AdA2oH4CuAfUD0DWgfgC6BtQPQNeA gHoGlA/AF0D6gega0D9AHQNqB ArgH1A9A1oH4AugbUD0DXgPoB6BpQPwBdA oHoGtA/QB0DagfgK4B9QPQNaB ALoG1A9A14D6AegaUD8AXQPqB6BrQP0AdA2oH4CuAfUD0DWgfgC6BtQPQNeA gHoGlA/AF0D6gega0D9AHQNqH/H3dzQm97cj/1PqDvFCRA6B9QPAAPqByBvQP3b7xcuJts4sQLiTwAAAABJRU5ErkJggg==" alt="Red dot" />
</body>

Я протестировал эту страницу, используя два устройства: одно — iPhone 6s, другое — iPhone 6s Plus.

Страница хорошо работает в большинстве случаев, в том числе на компьютерах (я тестировал ее с Firefox):

iPhone 6s, вертикальный

iPhone 6s Plus, вертикальный

iPhone 6s, горизонтальный

Однако для горизонтального режима iPhone 6s Plus это не удается:

iPhone 6s Plus, горизонтальный

Ожидаемый (показан красным):

iPhone 6s Plus, горизонтальный, ожидаемый

Почему это происходит? Можно ли использовать какие-либо другие методы (например, Javascript) для получения фактической высоты окна браузера?

Я также сталкиваюсь с той же проблемой при следовании коду в https://www.w3schools.com/howto/howto_css_full_page.asp . Я не уверен, происходит ли это на других устройствах iOS.

Ответ №1:

Вы можете использовать JS для определения ориентации и высоты, например

 var  width = window.innerWidth || document.body.clientWidth,
var  height= window.innerHeight || document.body.clientHeight

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode set width and height here 
   width  =  550 'px';
   width  =  350 'px';
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode set width and height here 
   width  =  550 'px';
   width  =  350 'px';
}