WebView - отображение адаптивного сайта в качестве рабочего стола - PullRequest
0 голосов
/ 06 ноября 2018

Пожалуй, типичный и многословный вопрос на первый взгляд. Но все другие ответы, на которые я смотрел (их много), последовательно (почти всегда) предлагали заменить пользовательский агент WebView на строку рабочего стола. Последовательно люди ответили, что это не работает для них. Я в том числе.

Как новичок в веб-дизайне, из того, что я сделал, похоже, в какой-то момент в последние несколько лет "адаптивный дизайн" стал рекомендуемой и наиболее широко используемой философией реализации веб-дизайна для определения того, как доставлять / отображать сайт.

Именно поэтому я считаю, что изменение пользовательского агента WebView не имеет никакого эффекта, так как сайт, похоже, определяет, как доставлять контент, основываясь на метатеге "viewport", например:

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

Кто-нибудь еще преодолел это? Будет ли мой (дилетантский) анализ проблемы правильным?

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Так что я думаю, что, возможно, я нашел решение, отчасти из-за ответа @ hussnain-muavia, хотя мне нужно было еще немного расширить, что, как я думал, потребовало своего собственного ответа.


Настройки WebView

WebView должен будет иметь возможность выполнять JavaScript:

WebSettings settings = _webView.getSettings();
settings.setJavaScriptEnabled(true); 

Чтобы сайт был полностью уменьшен (т. Е. Отображен весь сайт и без полос прокрутки), к WebView необходимо применить дополнительные настройки:

settings.setUseWideViewPort(true);
settings.setInitialScale(1);
settings.setLoadWithOverviewMode(true); 

Достижение макета рабочего стола

В конечном итоге, в результате на рабочем столе появится следующий JavaScript:

function desktopMode() {
    var viewPort = document.getElementsByName("viewport");
    if (viewPort != null) {
        viewPort = viewPort[0];
    }
    else if ((viewPort = document.getElementById("viewport")) == null) {
        return;
    }
    viewPort.setAttribute("content", "width=" + (screen.width + 1) + "; initial-scale=0.5");
}

Как я уже упоминал в своем вопросе, я новичок в веб-дизайне. Хотя я замечаю одну вещь - это непоследовательность (извините, веб-разработчики?), Поэтому я специально создал чек по имени и ID. Мы должны ожидать только один тег, следовательно, почему имя принимает нулевой элемент.

В дополнение к этому решению я обнаружил, что получаю макет рабочего стола, но не совсем полностью. Поэтому я изменил расчет следующим образом:

    getViewport.setAttribute("content", "width=" + (screen.width * 4) + "; initial-scale=0.5");

Мне это не нравится. Но это работает. Я подозреваю, что, возможно, для этого есть лучший расчет или константа.


Вероятно, стоит упомянуть, что все же стоит изменить строку пользовательского агента, если сайт не использует адаптивный дизайн. Но это не связанная тема.


Основным недостатком этого решения является то, что оно приведет к некоторому отвратительному пользовательскому интерфейсу, в котором пользователь сможет видеть изменение размера сайта. Как я положил JS в onPageStarted, но, конечно, функциональность переопределяется. Поэтому я поместил его после супер вызова onPageStarted или onPageFinished, и это приводит к тому же результату, когда пользователь видит изменение размера. Есть идеи?

0 голосов
/ 06 ноября 2018

Насколько я понимаю, я думаю, что это похоже на ситуацию ниже

Пожалуйста, посмотрите на этот ответ Показ настольной версии полностью адаптивного веб-сайта на планшетах

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...