Форум

alanat · #1 (**permalink**) 17.03.2020, 14:00

Добрый день.
При помощи

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');

должен заменяться параметр content в viewport в коде

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
.d1
{
    width:100px;
    height:100px;
    background-color:green;
    color:white;
    font-size:xx-large;
}
 
.d2
{
    display:inline;
}
 
.d3
{
    display: none;
}
 
@media (max-width: 596px) {
.d2
{
    display: none;
}
 
.d3
{
    display: inline;
}
}
</style>
<script>
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');
</script>
</head> 
<body> 
<div class="d1"><span class="d2">ПК <script>document.write(screen.width);</script></span><span class="d3">Моб <script>document.write(screen.width);</script></span></div>
</body>
</html>

В IE11, Chrome для ПК (включая переключение по F12), мобильной версии Samsung отображается "ПК", т.е.

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');

отрабатывается.

А мобильный Chrome упоно показывает "Моб", как будто

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');

не существует.
Есть ли подобный код, который работает и в мобильном Chrome?

Заранее благодарен за ответ.

voraa · #2 (**permalink**) 17.03.2020, 19:05

Проверил у себя на мобильном
Вот такой код

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
  <meta name="viewport" content="width=device-width">
<style>
.d1
{
    width:400px;
    height:100px;
    background-color:green;
    color:white;
    font-size:xx-large;
}
 
.d2
{
    display:inline;
}
 
.d3
{
    display: none;
}
 
@media (max-width: 596px) {
.d2
{
    display: none;
}
 
.d3
{
    display: inline;
}
}
</style>
<script>
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');
</script>
</head> 
<body> 
<div class="d1">
<span class="d2">
ПК <script>
document.write(document.querySelector("meta[name=viewport]").getAttribute('content')+' '+screen.width);
</script>
</span>
<span class="d3"
>Моб <script>
document.write(document.querySelector("meta[name=viewport]").getAttribute('content')+' '+screen.width);
</script>
</span>
</div>
</body>
</html>

Выдает
ПК width=597 360
И в Хроме и в Файрфоксе в портретном режиме

Форум

Справочник

Discord чат

Курсы javascript