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 */
}
Related
I am not good at responsive stuff, i designed my site for high resulation , so when i try to use it low resulation its looks bad, i fixed it for google chrome with:
body {
zoom: 80%;
}
But still looks bad for ie and mozilla , i try "transform" and "scale" stuff but they didnt work out, they zoom out like you zooming picture, they didnt reflow pages.. I need something that works like browser zoom property.
Thank You
There are several ways to accommodate Mobile/Tablet devices with your website.
FIXED DESIGN
Create a stylesheet that works generically across all formats. Your site will appear the same on all devices but this process will be the simplest solution.
The fixed design process should primarily use percentages and max-widths to create content that changes based on the device width.
PROS
When used well this process uses least resources and is faster to create and modify.
CONS
If your site has large amounts of content on a page then your site can become very cramped on smaller devices
RESPONSIVE DESIGN
If you want your site to be viewed differently and arguably optimally on different devices then you need a responsive design. This can be achieve by using a dynamic stylesheet or by using multiple stylesheets for different devices.
PROS
A very versatile website that can be display uniquely and optimally based on the viewing device.
CONS
Larger or additional resources and marginally longer loading depending on design. Longer development and modification times.
CREATING RESPONSIVE CASCADING STYLESHEETS
It is no longer practical to use set width becuase there are simple to many varible sizes.
The answer is flexible everything.
Using a viewport metatag as in your example to target the device
that is accessing your website.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites.
Using media queries.
Media Queries let you write individual rules for specific screen widths.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
Using Javascript.
A good javascript solution other than bootstrap is jquery mobile which takes away the time and effort of designing a responsive site by doing the work for you.
You do not need to know or edit any javascript to use it.
I'm having 3 media query breakpoints in my application
(min-width: 1024px) // For Desktops
(max-width: 1023px) and (orientation:portrait) //For Mobile Portrait
(max-width: 1023px) and (orientation:landscape) //For Mobile
Landscape
Based on the breakpoints I'm going to change the source of the image corresponding to the device and orientation
The image is having a width and height of 346x251 for desktop device .
Now I need to slice the image for mobile portrait and landscape. What size would be ideal for mobile portrait and mobile landscape
The short answer to me would be: whatever size works within the context of the rest of the layout.
What I usually do in similar situations is start with the smallest screen/browser size, try a layout, and then gradually increase the size of the view (in browser) until it looks like crap, then I make a change at that min-width with a media query.
I've found it's better to "future proof" your layouts by making it look good in any viewport size, not just the most common sizes based on today's products.
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
...
}
So far I was only able to find following media query:
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
However it seems it only supports webkit browsers, is there a similar query for (at least)
-moz- and -ms- (-o-) browsers?
What you can do instead of detecting device-pixel-ratio or min-resolution, you can detect the device width which is the resolution of the screen size instead of the viewport width which is the resolution of the browser size. This first of all gives you a correct media query when attempting to target specific devices, and to detect "retina" device you will need to use:
#media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
/* code goes here */
}
This sets up the media query to identify devices that are scaled like retina displays on iDevices and helps target them only to avoid other devices receiving these css styles.
Let me know if that works for you.
There is no such thing as a retina display. I have a MacBookPro with what Apple labels as "retina" (so I understand what it is you think you mean), but the word is completely made-up and really means nothing.
So, you won't be able to detect it as much as you won't be able to detect a "high performing gaming computer", which is as strictly defined.
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