Как узнать ширину устройства (не область просмотра)? - PullRequest
Новая
       60

Как узнать ширину устройства (не область просмотра)?

0 голосов
/ 27 сентября 2019

Я делаю свой первый веб-сайт, и мой тег meta просто определяет постоянную ширину вместо того, чтобы брать ширину устройства, потому что я получаю удовольствие от CSS-анимации и хотел не делать ее динамичной.Большинство из них выглядит хорошо на мобильных устройствах, за исключением вещей, которые должны быть в центре.Когда я центрирую его на основе процентов, он центрируется на основе заданной мной ширины (моего окна просмотра), а не ширины устройства.Конечно, это не ошибка, но мне было интересно, есть ли способ для меня получить ширину устройства, даже если я не установил его в качестве области просмотра, поэтому я могу просто вычислить атрибут left дляцентрируйте это.Есть идеи?Спасибо!

Я не ставил код, потому что на самом деле никаких проблем нет, это скорее вопрос с практическими рекомендациями.

Ответы [ 3 ]

1 голос
/ 27 сентября 2019

Чтобы узнать текущую ширину вашего html тела (устройства), вы можете попробовать этот код javascript window.innerWidth;

Попробуйте запустить этот код и изменить размеры ваших окон до различной ширины: 

function myFunction() {
  var wid = window.innerWidth;
  document.getElementById("display").innerHTML = "Width: " + wid;
}
<button onclick="myFunction()">Show</button>

<div id="display"></div>

ps: нажмите «Запустить код», а затем нажмите на полную страницу, чтобы изменить размер браузера и проверить мой фрагмент.Он покажет вам текущую ширину.

0 голосов
/ 27 сентября 2019

Я рекомендую flex css attribute.

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

html 

<div class="wrapper">
    wrapper
    <div class="inner"> inner </div>
</div >

css 

.wrapper {
        display: flex;
        justify-content: center;
        width: 200px;
}
.wrapper .inner {
    width: 50px;
}

или

Использование абсолютного и относительного 

wrapper {
    position: absolute;
    width: 200px;
}

wrapper  parent {
    position: relative;
    width: 50px;
    left: calc( 100% - 25px );
}
0 голосов
/ 27 сентября 2019

Иногда некоторые пользователи не максимизируют свои браузеры, когда дело доходит до настольных устройств.Но вы можете попробовать определить ширину тела вашего приложения, создав переменную.Что-то более продвинутое - проверить, есть ли какие-либо положительные изменения этого значения во время навигации.На мобильных устройствах это значение будет немного более точным, если только экран не поворачивается. 

your_var_name = document.body.clientWidth
...