i am making a new portfolio for myself and i want it to work across all platforms..
i have got it working on desktop, mobile portrait, ipad portrait and ipad landscape, all with different media queries set up..
however when i load the page on my android in landscape it does this :
* loads up the desktop version
* zooms right in rather than fitting to the screen
i would really want the phone landscape to load up the tablet landscape view as the screen sizes would be similar, but everything ive tried has no effect on it at all..
can check my code over at: www.stuffmadeby.me/test
By checking your code, the only media-query for landscape is (min-width:768px) and (max-width:1024px), are you sure the width of your android device isn't to small or too big ?
Related
I am fresh new to CSS in general and responsive design specially,
I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :
#media screen and (max-width:720px){ etc ...}
That works ok and my footer is restyling well, my question is :
This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ?
I mean if i try with :
#media screen and (max-width:1280px){ etc ...}
To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ?
What is the correct usage, ? Thanks
Don’t worry about a device being mobile or desktop or whatever.
Media queries allow you to apply difference style sheets based on the window size.
If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.
Webpage: www.mathias-syversen.net
Hello, this is my first post, so be kind!
I am trying to make a mobile friendly web page using #media queries to detect screen size and device.
Problem is, if I get the query to work with the mobile, it also applies to the desktop version. Probably because the max / min width is too large, to compensate for the new smartphones with high resolution.
#media only screen and (min-device-width: 420px) and (max-device-width : 768px)
Only works for iPad, but not for desktop or android mobile.
Have tried uncountable combinations of max and min screen width, and each time it works on the mobile (android) it also applies to the desktop.
If I try to detect pixel ratio, it works on the smartphone, but also applies to desktop (at least on OS X, probably because it has a retina display)
What I want is an easy way to just determine if the device is NOT a desktop, and apply the proper css, regardless if its android, iOS, phone or tablet.
#media screen and (max-width: 800px), (max-device-width: 480px), (max-device-width: 768px) {}
Now works on desktop > 800px, Tablet and mobile. As far as I have tested, this seams to dove my problem.
I should point out I'm learning reponsive too, so I may not be 100% right.
Viewport and pixel resolution (on mobile devices) are not the same. Consider loading a standard 960px web page on your mobile phone. You can see it all, but if you consider the iPhone does not have 960 pixels in width (portrait); it's resolution is either 320 (iPhone 3, 3G, 3GS) or 640 (4 and up). So why do you see the whole page? It scales, or zooms out of the page to fit it in the viewport. On the iPhone its default width is 980px, hence why pages based on the 960px grid system look fine, you don't need to scroll horizontally, you've even got 10px either side of margin.
So, the default viewport width size is 980px, but the native resolution width is either 320px or 640px depending on the phone model. To add further complexity all iPhones use the same viewport width of 320px. When a page loads and it doesn't cater for mobile devices you're essentially viewing 3 x zoomed out (980 / 320).
Note, by default a mobile device will scale out to its maximum - you can't scale or zoom out anymore. Using the iPhone example you couldn't zoom out beyond 980px. If the page extends beyond 980px you would need to scroll the page horizontally.
If you're looking at a page in default size (980px) and you zoom in on a portion of that page (you could be zooming in to scale at 100%) you're only going to see a section of that page.
Considering mobile devices, unless the webpage you're viewing contains the meta tag below in the head section, it will zoom / scale out of it's default viewport size.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser that the width of its window should be equal to the device's native viewport width (note, this is not necessarily the same as the native resolution width) and it should scale at 1, or 100%.
I suggest you have a look at Viewport Sizes to reference the device you want to target.
According to the website the Galaxy S4's viewport's dimensions are 360 x 640.
Proof of concept
Create a div, set up 2 styles:
Background colour blue
Background colour red with a max width of 360px
View the page on the S4 in portrait and landscape. The div should change colour; in portrait it should be red, landscape it should be blue.
Make sure you include the meta tag above in the head of the document.
From the research around I've done, it's far easier to find native viewport sizes on devices - i.e. when you're looking at the browser window at a scale of 1 / 100%. Finding the default viewport size on devices is harder, but thankfully when you're designing for mobile, it's the native viewport size you'll be most concerned with.
#media only screen and (min-device-width: 420px) and (max-device-width : 768px) Only works for iPad, but not for desktop or android mobile.
This means that it's work on devices which got their resolution beween 420 and 768px, so it wont apply to devices which got lower or higher resolutions than this. If you have web developer tools installed on mozilla press Ctrl+Shift+M and try to resize the window, there you can see the actual resolution on it, if it doesn't apply there in this scale of resolution (420 -> 768), it should be a CSS error, try to validate your code.
PS:Hope i get your question correct.
You have to really identify which breakpoints you want to use. I would suggest if you use (max-width:959px) this will include from mobile to tablet landscaped and very small res little computers. Then (min-width:960px) this is you breakpoint from laptop to desktop. Identifying which breakpoints in the beginning is very important in media query because this can get overwhelming in the end.
/** this is for mobile to little laptops res**/
#media only screen and (max-width:959px) {
}
/** this is for little laptops res to desktop**/
#media only screen and (min-width:960px) {
}
I tried to use this media query
#media screen and (device-aspect-ratio: 40/71) {}
for the iPhone 5 responsive design. I can see the effects in my iPhone 5. But for that every time I need to upload the modified version to server. Is there any way to see the changes reflecting in this iPhone width by just re-sizing the window size? Or am I missing something stupid?
you can user ctrl+shift+m in mozila to test the effects.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML
so, I want to do a "mobile" friend view of my site. Its liquid designed already, but mobiles need definitely different look. Now, how to detect if I visited it with mobile (iphone, ipad, android)? More specifically, I imagine it as if the screen width is smaller than a value (dunno that value), then thats considered a mobile client. How to detect, so that generate the mobile optimized CSS/HTML outputs? Maybe im too simple, but to me mobile client = smaller screen, and nothing more
There isn't really a great way. Before you used to be able to say if under a certain number of pixels then it is a phone. But now phones are getting both higher pixel count but also crucially large screens too. Tablets are as small as 7" now, but they could get smaller. Some phones are over 5" and could get bigger. Then there are things like physical pixels to css pixel ratios to think about.
If not screen size or pixel count, maybe it could be if it supports touch or not. But Windows 8 threw that on its head, as that supports touch on the desktop.
I would say it depends on the content rather than the device. Test your site using various widths. See when the width becomes sub-optimal for the content, and throw in a media query there to adapt the layout. I think a content first rather than device first strategy is more future proof.
Also remember that it may not just be a mobile that wants your mobile friendly layout. For example soemone could be using their browser in a small window, rather than full screen, or they could be using the snap mode in Windows 8, where the width is the same as a iPhone width at 320px.
Use media queries. Then you can detect if you are on a mobile device the browser will load the mobile CSS and if you are on a PC the browser will load the PC version of the CSS.
http://www.w3.org/TR/css3-mediaqueries/
Then you can develop the mobile device CSS like this way (supose the mobile have 480x640 pixels):
#media screen and (max-device-width:480px){
...
put your mobile device CSS code here
...
}
Supose you want develop CSS for tablets (1.024x768pixels)
#media screen and (max-device-width:1024px) and (orientation:portrait){
...
put your tablet device CSS code here when tablet has portrait orientation.
...
}
#media screen and (max-device-width:1024px) and (orientation:landscape){
...
put your tablet device CSS code here when tablet has landscape orientation.
...
}
And for PCs (1280x968pixels):
#media screen and (max-device-width:1280px){
...
put your PC CSS code here
...
}