независимая от масштабирования версия window.devicePixelRatio mobile - PullRequest
0 голосов
/ 04 марта 2019

Друг разрешил мне использовать пустой домен для отображения проблемы.http://www.omnisine.com/ - первый, загрузите его на ПК и телефон (у мобильного телефона есть автоматическое перенаправление на index-mobile.php).http://www.omnisine.com/index2.php также делает то же самое, ПК и для мобильных устройств он перенаправляет на index-mobile2.php;этот масштабируется с помощью скрипта window.devicePixelRatio, который управляет окном просмотра.На втором вы увидите, что изображение карты мобильной области сейчас идеально подходит для мобильных устройств, но панель задач действительно мала по сравнению с основной.Это происходит с любым элементом, добавленным до или после основного сценария карты изображений.

ПК для обоих выглядят одинаково в основном независимо от масштаба.Обратите внимание, что основное изображение, которое загружается в первую очередь, прежде чем нажимать на карту области, загружается с полным разрешением (независимо от размера устройства или точек на дюйм), то есть изображение, загружаемое за пределы Java в качестве фонового CSS-изображения.

Код здесьмасштабирует всю страницу, где, как мне хотелось бы, масштабировать только изображения 2 изображения на клиентской карте изображений Javascript (usa_map_720_alt_5_tiles.jpg & usa_map_720_alt_4_tiles.jpg) для просмотра мобильных страниц.Масштабирование устраняет проблему img, но мешает всем элементам HTML и CSS, которые не зависят от скрипта карты изображений.

Они говорят об этом в приведенной ниже ссылке, именно то, что я хочу, но это для сетиигра.Проблема заключалась в том, что им пришлось масштабировать страницу с масштабом devicePixelRatio до 1, что делает игру визуализированной в окне просмотра как HD, но все элементы HUD были бы маленькими: моя проблема!Внизу есть решение, но я не понимаю, как его применить.

deviceNormalPixelRatio: предложение для устройства, не зависящего от масштабаPixelRatio для HD Retina-игр

Любая помощьбудет под вопросом.Я все еще изучаю javascript и в основном все остальное, и эта проблема беспокоит меня, поскольку я просто делаю целую кучу проектов, вот как я учусь.

Спасибо, Джейсон

Обновление: так что метод масштабирования ниже также имеет другие проблемы.На moblie (даже iphone X даже) он работает медленнее и ломает карту местности в ландшафтном режиме.В основном это можно исправить, если вся страница не масштабируется.или они должны быть способом просто отредактировать оригинальный код карты изображения на стороне клиента или сервера.Любая помощь по этому вопросу будет очень полезна.Могу ли я создать все эти функции с помощью CSS?

<script type="text/javascript">
   var scale = 1 / (window.devicePixelRatio || 1);   
var content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale;

document.querySelector('[name="viewport"]').setAttribute('content', content);
</script> 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...