Domanda
I need help.
I´am working on a personal website and I want to have it responsive (phone, tablet, desktop). Problem is that when I set media queries on one particular resolution (for phone for example), it shows differently on phone and on desktop. When I resize window width to phone width, it doesnt show any problem and it shows as I want. But when I access my page with my phone, desktop version loads (large one, not even medium-tablet one). What am I doing wrong? Thanks for help!
Its a first time I am working with media queries so if you have any suggestion, please write it down too. Thanks!
https://stackoverflow.com/questions/23461640
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<link rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width: 480px)" href="css/small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:481px) and (max-width: 1000px)" href="css/medium.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1001px)" href="css/large.css">
Also I want to use min(max)-width, not min(max)-device-width. I find it more useful that way.
Soluzione
Try setting the width inside <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Or use media queries like this: min-device-width : 481px instead of device-width : 481px
