Я пытаюсь использовать медиа-запросы в первый раз в жизни. То, что я хочу достичь, - это онлайн-форма для мобильных браузеров (в основном для Android MDPI/HPDI и iPhone от 3 до 4).Запросы мультимедийных запросов CSS по сравнению с шириной фонового изображения
То, что я должен сделать запрос носителя для 320px экранов с 320px шириной фонового изображения, таким образом:
@media only screen
and (min-device-width : 120px)
and (max-device-width : 320px)
{
body {
background-image:url('../img/bg-320.jpg');
background-repeat: no-repeat;
width: 320px;
height: 436px;
margin:0; padding:0; border:0;
}
, а также на том же CSS, другой медиа-запрос для небольших экранов (менее 480px ширина) с фоном 480px ширина изображения, таким образом:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
body {
background-image:url('bg-480.jpg');
background-repeat: no-repeat;
width: 480px;
height: 800px;
margin:0; padding:0; border:0;
}
детектирование работает нормально, но проблема заключается в том, что 480-ширина устройства они увеличить 480px фон, как это было слишком большим для их экрана , что не имеет смысла!
Даже незнакомец, если при попытке загрузить 320px-CSS-блок (первый выше) на устройствах шириной 480, то он отлично работает! Нет увеличения! Но, очевидно, изображение немного размыто.
Это происходит на моем iPod Touch и моем HTC Desire.
Может ли кто-нибудь мне помочь?
Кстати, мой заголовок выглядит следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</head>
EDIT:
Я просто понял, что медиа-запросы не имеют ничего общего с моим вопросом.
Проблема в основном: Почему на двух устройствах шириной 480 пикселей ширина изображения на 320 пикселей равна полному экрану, а увеличенное изображение ширины 480 пикселей? Это просто не-смысл!