Итак, вот сделка; У меня есть веб-сайт, полностью закодированный в настольной и телефонной версиях, но я не знаю, как заставить веб-сайт знать, что устройство, посещающее сайт, является либо настольным компьютером, либо мобильным устройством, поэтому он загружает любую версию сайта соответственно. Как я могу это сделать? Я все еще новичок в веб-разработке, поэтому я не знаю.

Заранее спасибо.

|источник

2 ответа2

1

Это решение не требует JavaScript и отлично работает на настольных ПК, планшетах и смартфонах. У вас будет по одному файлу на каждую страницу, что позволяет легко вносить изменения, обновления и т.д.

Прежде всего, вам понадобится это в разделе head каждого html файла:

<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

Затем в файле CSS вы можете сделать адаптивный дизайн, способный адаптироваться к различным размерам экрана. Например, в вашем файле CSS вы определяете:

body {
    font-family: 'Arial', sans-serif;
    font-size:1em;
    color: #636770;
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("/images/bg.png");
    background-repeat: repeat;
}

#top {
    display:block;
    width:100%;
    margin-top:40px;
    height: 147px;
    position: static;
}

@media (max-width:800px){


    #top {
        display:block;
        width:100%;
        margin-top:5px;
        position: static;
    }
}

В этом примере мы определили body как общий элемент с одинаковыми свойствами для каждого размера экрана, но #top определяется таким образом, что на рабочем столе будет верхнее поле 40 пикселей, а когда ширина экрана ниже 800 пикселей, верхний маржа 5px.

|источник
1

Вы заявляете, что используете Bootstrap для создания своего сайта, поэтому у вас не должно быть двух версий. Вы создаете одну версию, а затем задаете элементы для отображения на экранах разных размеров с помощью классов CSS.

В этом случае полезна документация Bootstrap о том, как использовать систему сетки.

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

|источник

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .