Соответствующий сайт: http://RVInspector.pro/
Я использую Wordpress Theme, 2017, и думаю, что некоторые, хотя и не все, проблемы, с которыми я столкнулся, могут относиться именно к этой теме.
Я пытался с ограниченным успехом сделать этот сайт отзывчивым, поскольку он относится к изображениям заголовков.
В настоящее время я использую решение PHP, но это решение исчезает, как только страница загружается.
Под этим я подразумеваю, что если посетитель поворачивает свое устройство в другой ориентации после загрузки страницы, то, что загруженный PHP будет продолжать отображать.
Поскольку PHP заканчивается при загрузке страницы, мне нужно решение CSS, которое будет продолжать работать после загрузки страницы.
Но каждое CSS-решение, которое я попробовал, не могло заменить изображение заголовка
Мне нужно одно изображение заголовка для настольных компьютеров и ноутбуков, второе изображение заголовка для мобильных устройств в портретной ориентации и третье изображение для мобильных устройств в альбомной ориентации.
Более того, изображение должно меняться по мере изменения ориентации устройства, в том числе после загрузки страницы.
Изображения:
Для справки, PHP-решение, которое я сейчас использую, выглядит следующим образом:
/** Partial Fix for mobile header. */ function custom_header_image_tag( $html, $header, $attr ) {
if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad') || strstr($_SERVER['HTTP_USER_AGENT'],'Windows Phone') || wp_is_mobile()){
$html = "<img src=\"http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg\"></img>";
}
return $html; } add_filter( 'get_header_image_tag', 'custom_header_image_tag', 10, 3);
Вышеуказанное работает только для начальной загрузки страницы. Это также отрицательно влияет на размер изображений, расположенных ниже по страницам, на некоторых устройствах в альбомной ориентации.
Я также пробовал несколько вариантов:
@media screen and (max-width: 48em) { ... }
Моя цель - сохранить всех стилизованного текста, видимого на изображениях, в центре экрана и в удобочитаемом размере.