I need to open large screen view(e.g.screen width 1400px) in small screen . I had this problem for mobile, which was solved by using this meta <meta name="viewport" content="width=1220">. Related question RWD: Show Desktop version in mobile minified, without horizontal scroll
I can't use #media for smaller desktops as client wants the same sizes and appearance as in large screens. So is there a way to use this meta not only for mobile devices but for desktops too or you can advise another way? Thanks!
Related
I have a phonegap based html app that I'd like to show on both desktop/ipad and mobile.
I was looking into media-queries but it seems pretty cumbersome that I need to specify min/max px. and do a separate media query for each type of mobile so for example iphone4, iphone5, iphone6, iphone6plus, etc because they have different sized screens.
What I want basically is to set up a css where I say, "for all mobile devices in landscape do this", and "for all mobile devices in portrait do this". I don't want to get into specifics about WHICH type of mobile device it is or fiddle around with specific screen dimensions. I don't even want the word "px" to appear in my media query basically.
Similarly I want to know if it's a tablet portrait/landscape.
And if it's a desktop.
Is there an easy way to do this with media queries?
You're correct in not wanting to create different layouts for every specific mobile device, as it will be an ever increasing list of devices it isn't robust at all. However making the distinction between desktop and mobile also isn't easy. Just think about the screen resolution of a tablet versus a netbook pc, they are almost alike.
In my opinion the best way to design your breakpoints is to start with a mobile view and to keep expanding the screen size until you think that the design doesn't work anymore. At that point you should include a breakpoint and update your design (perhaps add a sidebar, show an expanded menu etc).
So unfortunately I think that there isn't an easy way to distinguish between mobile an desktop devices, the only easy option would be to find a pixel based breakpoint (bootstrap uses 992px) from which your desktop design should apply.
To make the distinction between portrait and landscape mode you can use #media screen and (orientation: portrait) and #media screen and (orientation: landscape).
For example you could use something like this:
.container {
/* mobile devices */
}
#media screen and (orientation: landscape) {
/* mobile devices in landscape */
}
#media screen and (orientation: landscape) and (min-width: 992px) {
/* desktop devices */
}
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) {
}
Unfortunately mobile phones have such high screen resolutions that my website comes it far to small. It adapts perfectly when zoomed in on a desktop browser but unfortunately on mobile browser the webpage viewport size does not actually change once zoomed. To try and solve this I have already gotten a script that detects a mobile user agent and then sets the body width to 500px, this looks about the perfect width but unfortunately the mobile browser does not set its viewport to 500 even after I set the meta for viewport 500 and this results in my webpage rendering in the corner of the browser. Once zoomed in it looks fine though but that is not what I want. My site is in some way similar to nokia.com and I want it to behave in the same way on a mobile client.
Can someone please tell me what the correct procedure is for doing something like this because I am in no way a proper web developer, I am just doing this to learn.
Here is my meta:
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
You need to write conditional CSS rules for smaller browser sizes.
One example:
#media screen and (min-width: 768px) {
.item1{}
.item2{}
}
Here is a site I just found through a quick google search that should be able to get you started at least. http://www.conditional-css.com/usage
Good luck with your learning!
It is better to use #media queries (available is css3)
Something like:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
Try this
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
and use the media query to target all the screen size
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
Hope this helps you
Finally solved it! It seems the reason I was having so much trouble is because the mobile device I was testing in was a Windows Phone 8 device and apparently WP8 does not really respond well to the viewport meta tag. This is easily solved by the addition of a MobileOptimized meta tag.
I know it sounds a silly question but I've searched through stackoverflow, and most questions discussed about view switching bug when iphone switched from portrait to landscape.
Here is my question.I have designed portrait view for iphone, I manually redefined the width of most divs. The site now works fine in portrait view. Now I am about to develop landscape view, I just want the site be displayed fit into the size of the screen and keep the format as it is displayed in normal browsers. No more design for separate css style sheet for each divs for this view. Just make it be displayed the same format in normal browser but smaller to fit into the size of landscape screen on phones.Is it possible to just set something so that the whole site can be fit into the size?
#media screen and (min-device-width: 481px) and (orientation:landscape){
//what can I put here to make the whole site fit into the landscape screen?
}
If I have not misunderstood your question, you need a viewport first
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then just set your wrapper's width to 100%, or try a grid system.
I'm currently annoyed by my media queries to target smartphones. It's the first time I use media queries.
I've done a tablet version (768px) of a website, and a phone version (320px).
Note that theses screenshots are actually Firefox screenshots.
As you can see, these displays work fine when I resize my window on Firefox, IE, Webkit.
However, the display is wrong on my iPhone 3G and my Xperia X8.
Here are the results (left iPhone, right Xperia) :
As far as I know, both phones have a 480*320 pixels resolution.
So, why such results?
On the iPhone screen, the light brown rectangle on the header is supposed to be 300px width. Why is it so small?
And why is the tablet version loaded on the Xperia ?
I use these media queries on my CSS :
/* Tablets ----------- */
#media (min-width: 768px) and (max-width:1023px)
/* Phones */
#media (min-device-width: 320px) and (max-device-width:767px),
(min-width: 320px) and (max-width:767px)
I hope you'll can help me, I'm stuck on this issue since too much days.
Have you setup a proper viewport? Like:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
Put that in your head tag.
Use proper media Queries to ensure the perfect rendering and responsiveness for smart phones and cross platforms. here is the link you can learn how to use media queries in right way. css tricks