Я только что загрузил свой веб-сайт на размещенный сервер с помощью 1 & 1. Проблема, с которой я сталкиваюсь, я не могу понять, почему правила мультимедийных запросов, которые я установил, теперь не являются рабочие/игнорируются.CSS Media Запросы, не работающие на мобильных устройствах или планшета
Я протестировал на своем iphone 5, но мой сайт не масштабируется, как следует. Однако, когда я изменяю размер моего браузера (Google Chrome) на своем рабочем столе до размеров планшета и мобильного телефона, он правильно масштабируется.
Есть ли причина, почему при изменении размера моего браузера она работает отлично, но когда я тестирую ее на мобильном устройстве, она не работает/масштабируется должным образом?
Только для дополнительной информации Я использую Wordpress, и я включаю файлы css в правильном порядке через файл functions.php.
Мой сайт www.jamieclague.com, пожалуйста, ознакомьтесь с исходным кодом.
Благодарим за любую помощь.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (фрагмент кода)
@media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
@media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
@media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
Вы пробовали заменить max/min-device-width с максимальной/минимальной шириной? – Huangism
Да, на самом деле у меня это было для начала. Фактически, когда я использую max/min-width, он правильно масштабируется в browswer, но не на устройствах. Но когда я использую max/min-device-width, он не масштабируется должным образом в браузере или на устройстве ... Я уверен, что это что-то маленькое, которого я должен упустить? – user3060945
Можете ли вы описать, как он не работает? Например, с использованием iphone 5, шириной 320 пикселей.Являются ли стили разными стилями точки останова или вообще не работают? – Huangism