Используйте другой код HTML для настольной и мобильной версии
На моем Веб-сайт Я пытаюсь изменить внешний вид div в зависимости от размера экрана. У меня уже есть файл CSS, который занимается этим. Когда я использую мобильную версию, названия в этом разделе выглядят так:
Итак, вы можете видеть, что заголовок не помещается в одну строку.
Код является:
<div class="row">
<div class="6u"> <section> <h3 class="image-radius img"><img src="https://web-answers.ru/wp-content/uploads/2019/02/datorama.jpg"/>DATA VISUALISATION ENGINEER</h3>
<p><b>Datorama</b></p>
<p>• Digital data analysis and automation</p>
<p>• User-Interface interaction improvement</p>
<p>• Visualisation of the insights </p></section>
</div>
Итак, я изменил одну строку кода, добавив <br> :
<div class="6u"> <section> <h3 class="image-radius img"><img src="https://web-answers.ru/wp-content/uploads/2019/02/datorama.jpg"/> <br>DATA VISUALISATION ENGINEER</h3>
Итак, мобильная версия в порядке. Но когда я использую это, моя настольная версия выглядит так:
но раньше это было так:
У меня вопрос, как я могу иметь другую версию HTML-кода в зависимости от размера экрана? У меня есть код CSS, но его будет сложно настроить. Теперь мне просто нужно добавить <br>, Есть ли способ добавить как (если настольная версия, проверка файла CSS -> HTML-код версии 1, иначе -> HTML-код версии 2).
Решение
Вы можете найти что-то здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
// your mobile css version
@media (min-width: 700px) {
// your desktop css version
}
Другие решения
Вы могли бы использовать что-то вроде этого
function isMobile() {
$deviceList = array(
'/iphone/i' => 'iPhone',
'/ipod/i' => 'iPod',
'/ipad/i' => 'iPad',
'/android/i' => 'Android'
);
foreach($deviceList as $deviceKey => $deviceOS) {
if(preg_match($deviceKey, $_SERVER['HTTP_USER_AGENT'])) {
// echo your content for mobile devices
}
}
}
Это не все мобильные устройства, которые могут быть предоставлены $_SERVER['HTTP_USER_AGENT']Вы можете проверить detectmobilebrowsers.com для полного списка