hey..guys. i have a problem when i'm try to using min-device-width or max-device-width on my css blog. but it doesn't work. but, the weird thing is.. when i'm change to min-width or max-width.. i does work properly. so, what's going on here? i'm i wrong? please help me.. btw, this is my blog address: idwds.blogspot.com please review it, and tell me what wrong part..
There are no such properties as min/max-device-width, even in CSS3. They do exist inside media queries, but are unreliable. Given your total lack of MEDIA attributes or media queries, it seems unlikely that's what you are trying to do. A better question would be what you are even trying to do with them? Given the endless static CSS inlined in your markup, fat bloated pointless reset, outdated markup and relative lack of semantics -- I very much doubt you are building for responsive layout... either that or you are trying to do so without a proper foundation to start from. Also beware that without a viewport meta: <meta name="viewport" content="width=device-width; initial-scale=1.0" /> Code (markup): Most iOS devices lie about their width as they're more concerned with pages NOT designed for mobile... Likewise this bit of CSS: @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } Code (markup): helps prevent certain mobile browsers from stopping you changing the font sizes.
of course I have to add this code before. <meta content='width=device-width; initial-scale=1.0' name='viewport'/> but still it doesn't work properly..
I recommend you using of Twitter Bootstrap framework for building responsive designs. Or just take a look how Bootstrap is dealing with different width sizes.