Figured out how to make separate css, to use in cases of mobile use, which is cool. works like this:
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen
and (max-device-width: 480px)" />
Is this a safe number to set the pixels at for most general smart phones like the iphone and galaxy? I don't want to have multiple mobile ref, just one that will cover them all for the most part. Is the above code basically saying, anything below pixel width of 480, will go to that css ref?
Thanks much.
No, this not fully safe in terms of serving to all devices. Ideally, you want responsive design to also deal with tablets, not just smartphones, tablet users often do not have access to a mouse. The most common tablet resolution is 768x1024 (for me this is about 75% of tablet traffic, over 6% of my web traffic in total, and there are also some larger phones in there) and there are a few oddball smartphones (making up about 1-2% of total traffic) in the 500-600 resolution range.
In general, I recommend using max-width and not max-device-width, because it makes the site collapse to a mobile format when in a small window on desktop, which is ultimately more useful to the user.
In my opinion, best practice is not to use a separate mobile stylesheet but rather use CSS media queries to make the elements of your webdesign responsive, which you can do within a single stylesheet. You can then have some elements collapse into a single-column layout at certain widths, and others at other widths, again using max-width but using it on individual elements.
This allows you to make the best of the intermediate widths. Some two-column layouts or horizontal menus, will look fine on a tablet, others you will need to collapse to a single column or a hidden vertical mobile menu. Fidget with the widths for each element and you'll get a flexible design that works optimally on all devices.
This way you don't try to guess the device type, just redesign element by element based on the window width. You can do away with "only screen" too.
Related
Consider two screens:
same resolution
same orientation
but different physical sizes
Exempla gratia:
How can i target different screen sizes with CSS media queries?
Because, for example:
for the one 1920px wide display, it is uncomfortable to read the long lines of text that stretch edge-to-edge, and you'd want some padding, margin, or other spacing to narrow the text
but for the other 1920px wide display, you want text to go edge-to-edge
Bonus Chatter
And you can't try to invoke User-Agent strings:
i'm asking about CSS media queries, not User-Agent strings
the 4" screen could be connected to a PC
the 18" screen could be connected to a phone.
And you can't try to weasel out of the question by talking about orientation, or by musing if the screen supports touch or not, nor can you use the handheld attribute
I'm asking about using CSS to style a page based on the (physical) size of the screen.
Bonus Reading
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used (tries to rely on resolution)
Media Queries: How to target desktop, tablet, and mobile? (tries to rely on resolution)
How To Build A Mobile Website
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Using Media Queries For Responsive Design In 2018
What media query breakpoints should I use? (tries to rely on resolution) ("breakpoints" is another word for "pixels")
Media Query for Large Desktop
CSS media queries for handheld and not small browser screens
Media query about screen size instead of resolution
Well a typical media query for this would use min-width or max-width to hide or show things depending on display size. This is dependent on a <meta> tag which tells the browser to use the physical width of the display as the viewport width rather than using the resolution of the display as the viewport width.
For example:
<meta name="viewport" content="width=device-width"/>
and
#media all and (max-width: 600px)
{
/*Put your mobile styles here*/
}
It's not a perfect solution and doesn't really account for touch interfaces for tablets or other larger mobile displays, but it's a good place to start for building mobile user interfaces.
It's important to emphasize that this is intended for displays in which the content is scaled. I know for fact that most modern mobile devices use scaling (2x/3x on iOS and xhdpi/xxhdpi on Android), but it should also work with Windows scaling, though I'm not 100% sure on that and don't have a way to test it at the moment.
These media queries can accept any CSS unit as well, so you could very well use actual inches if you wish.
#media all and (max-width: 3.5in) { /* ... */ }
I have a website I want to fit on a mobile device. I do know that all mobile devices have different screen sizes. what is the best way to go about this?
I also know that you can put #media or at #media screen
is there a difference between those 2 as well?
The best way to do this is by having the divs width measured by percent . like have to divs of 50% each, which will be displayed the same way on any screen . Using percent is the best way. Another way thats much simpler is using bootstrap, which has existing css classes that will help you create responsive divs, images, ect. They have all the right classes that will work for mobile and pc. hope this helps
There are many different practices for building mobile friendly websites. The most notable being Responsive Web Design.
Another method would be to create device specific templates that would need to be coded individually for each devices screen size.
Clearly, the latter of the two is the most labor intensive and can be avoided and used only when working with drastic screen size differences. For instance, you may want to have separate templates for different types of devices instead of screen sizes (phones, tablets, computers).
Doing device specific (not screen size specific) styles allows for better use of space on bigger resolution devices.
I am building a Phonegap application with two layouts: one for 'handhelds' and one for 'tablets.' I want devices larger than 6 inches to display the tablet layout and smaller devices to use the handheld layout.
I've looked into media queries. My concern is that if I target a device by pixel size, for example iPad1 768px, a high-density handheld will come along that also qualifies for this query, showing the wrong layout and making the text unreadable and the widgets too small. I've considered webkit-min-device-pixel-ratio > 2 for this query, but doesn't that leave 'gaps' where an unfortunate combination of resolution and pixel ratio triggers the tablet template on a handheld device?
So, what is a general strategy I could follow to reliably 'pick one' of these two layouts (and avoid overlaps between devices) when the device loads? I am only supporting portrait mode and I can change all CSS, JS, <meta name="viewport"> etc..
Essentially, I'd like to be able to come up with some rules to differentiate between columns 2 and 3 here http://nmsdvid.com/snippets, but without targeting specific device models.
Thanks!
I think pixel width in media queries are still standard width, all current iphones display a document width of 320px. This is as the UIwebview used in phonegap is just a standard browser environment.
My css needs depend on the amount of cross over between my iphone and Ipad versions of my app. If the css is almost the same I will just have extra css for Ipad devices in the one CSS file using a media query, otherwise I will have a different file for each.
I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.
It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?
Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.
One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.
Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.