Определение ширины устройства и отображение правила мета области просмотра

Я ищу выход из своей ситуации. По сути, мне нужно использовать несколько правил области просмотра для ширины устройства. Что-то вроде:

    <meta name="viewport" content="initial-scale=0.4, width=400"> 
    <meta name="viewport" content="initial-scale=0.6, width=700">
    <meta name="viewport" content="initial-scale=0.8, width=1000">

Но, как мы знаем, мы можем использовать только одно правило области просмотра и, в отличие от медиа-запросов, в параметре «ширина» правила области просмотра нет (min-width) и (max-width). Что я хочу сделать, так это использовать Javascript для получения ширины устройства, на котором находится пользователь, а затем на основе этого вывести правило мета-области просмотра.

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

Любая помощь высоко ценится! Заранее спасибо!


javascript css meta viewport
person Ashtheslayer    schedule 13.07.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Взгляните на этот простой фрагмент кода, который позволяет вам получить информацию о мета-контенте и ширину экрана:

function getMetaContentByName(name, content) {
  var content = (content == null) ? 'content' : content;
  return document.querySelector("meta[name='" + name + "']").getAttribute(content);
}

let metaTag = getMetaContentByName("viewport", "content")
console.log(metaTag)

let width = window.screen.width
console.log(width)
<meta name="viewport" content="initial-scale=0.4, width=400">

Теперь вы можете создать что-то вроде этого:

let screen = {
  width: window.screen.width,
  height: window.screen.height
}

if (screen.width < 480) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.4, width=480");
} else if (screen.width < 720) {
 document.getElementById("viewport").setAttribute("content", "initial-scale=0.7, width=720");
} 
<meta id="viewport" name=viewport content="width=device-width; initial-scale=1">

person Community    schedule 13.07.2018

arrow_upward
0
arrow_downward

Я также нашел простое и более простое решение. Это достигается с помощью атрибута screen.width и проверки диапазона ширины с последующим сбросом атрибутов для метатега области просмотра. это будет выглядеть примерно так:

    <meta id="vp" name="viewport" content="width=device-width, initial-scale=0.3">
    <script>
    window.onload = function() {

    if (screen.width >= 300 && screen.width < 500) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.2,width=device-width');
    }

    else if (screen.width > 500 && screen.width < 600) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.4,width=device-width');
    }    

    else if (screen.width > 600 && screen.width < 700) {
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.5,width=device-width');
    }}

Таким образом вы можете загружать разные масштабы области просмотра, что мне и нужно. Кредит на @Cpncrunch отсюда: Достижение минимальной ширины с помощью метаданных области просмотра тег

person Ashtheslayer    schedule 13.07.2018