Почему максимальная ширина и ширина: 100% работает?

-1

Проблема с моим blog. Поэтому я не могу поставить код здесь. Хорошо, если вы видите, когда вы открываете этот блог в браузере рабочего стола и уменьшаете ширину браузера, содержимое блога сжимается, т. Е. Ширина уменьшается (это не прокрутка по горизонтальной коррекции). Это из-за ширина: 100% и max-width Используемые свойства.Почему максимальная ширина и ширина: 100% работает?

Но когда вы открываете этот блог в своем браузере телефона, он не следует за ними, хотя разрешение экрана мобильных телефонов меньше, чем на рабочем столе браузера. Почему контент не сокращается? Я что-то понимаю неправильно?

источник

2016-07-04 Vikas Kumar

Я думаю, что это проблема с браузером! Не используйте%, вместо этого установите ширину для максимальной ширины устройства! Вот одна ссылка. http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web –

-1

Вы должны использовать

<meta name="viewport" content="width=device-width, initial-scale=1">

на странице языка HTML <head>, чтобы сделать ваш блог мобильного дружественного

источник

2016-07-04 12:50:57

Макс-ширину должны содержать пиксели (точки) вместо символа процента (%).

1) Добавьте к вашей голове файла:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

2) Попробуйте медиазапросы такие как

<style type="text/css"> 
/* default styles here for older browsers. 
    I tend to go for a 600px - 960px width max but using percentages 
*/ 
@media only screen and (min-width:960px){ 
    /* styles for browsers larger than 960px; */ 
} 
@media only screen and (min-width:1440px){ 
    /* styles for browsers larger than 1440px; */ 
} 
@media only screen and (min-width:2000px){ 
    /* for sumo sized (mac) screens */ 
} 
@media only screen and (max-device-width:480px){ 
    /* styles for mobile browsers smaller than 480px; (iPhone) */ 
} 
@media only screen and (device-width:768px){ 
    /* default iPad screens */ 
} 
/* different techniques for iPad screening */ 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
    /* For portrait layouts only */ 
} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
    /* For landscape layouts only */ 
} 
</style>

источник

2016-07-04 13:14:29

Медиа-запрос просто не работает! Клянусь. –

Вы пытались добавить то, что я сказал в заголовке, а затем остальную часть ниже? –

Почему максимальная ширина и ширина: 100% работает?

ответ

Смежные вопросы