I'm having different CSS files for different layout (Phone & Tablet). Since I have added styling in tablet view based on the view I get on my Samsung Note 8 with resolution 1200x800.
But when I run this application on Samsung Galaxy tab750 with resolution 1920x1080, I get smaller layout with smaller fonts since I have adjusted the fonts and layout based on Note 8.
So I get the suggestion to add the another CSS file for handling this. Next, when our QA tried running the application on iPad (Retina Display 2048x1536), again the third CSS is even small in it.
In 2012, there was a single tablet with a 2,560x1,600 resolution. In 2013, there were at least six. I suspect we'll see even more in 2014 (http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw).
With respect of this post Responsive Web Design and high resolution displays (iPhone 4/5),
We would be using media queries for required resolutions,
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
So my concern is can we handle this scenario, without going on adding more and more CSS and media queries, if so please suggests.
There are a number of media-query based ways of detecting high-density/retina devices.
I personally tend to use this, which seems to capture the vast majority of devices:
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {}
Totally personal preference though!
Do bear in mind that - to the most part - 'high density' screens (rather than just high-resolution) report themselves as their non-HD resolution for the purpose of media queries.
For example: the Retina Apple iPads have an actual screen-resolution of 2,048 by 1,536, but still reports as 1,024 by 768px. Thus, the same screen-width/height media queries will capture the iPad 4 (retina) as the iPad 2 and - apart from being a little more blurry in the case of the older iPad - will look the same.
You can combine the media query I've included above with width/height to get a much more granular target on specifically-HD devices if you wish.
One very important exception to this is high-density display devices running Windows 8 Mobile which has a known bug with correctly reporting the viewport.
Related
I have created a site with the Blogger platform.
I have 4 pages on my blog, everything in the page list looks great on PC (this is my blog: https://www.onlinebouwdroger.be/p/home.html).
I want my mobile version to be just like the desktop version (so no Custom mobile template).
Here's the problem I'm encoutering (see screenshots below):
The pages bar shows only the first two pages on Mobile, and then puts
others in 'More...'
When clicking on 'More...' the page titles are
all messed up.
I would prefer to just have all 4 pages shown in the page list on mobile, just like on desktop.
I get that a mobile screen isn't wide enough to put the 4 titles in one row (like on desktop), but is there a way to put the last 2 page titles below the first 2 (so the titles are displayed 2x2)?
Or if not possible, the drop-down menu should at least look and work decently.
Like I mentioned, I want to show Desktop theme on mobile devices, not Mobile theme.
desktop view
mobile view without clicking on 'more'
mobile view after clicking on 'more'
How do I solve this issue so that the full page list is displayed on Mobile as well? (Without having to switch to Mobile template?) Or how do I make the drop-down menu look/function properly?
I've looked everywhere online, but can't seem to find a proper answer.
Thanks in advance!
Juliette
You can target smaller screens in your css like this:
#media screen and (max-width: 400px) {
myNavbar { css in here }
}
From there you can change how the links are displayed.
You have to add the CSS for the Tab inside media query to hide/show Tabs based on screen size
/* Extra small devices (phones, 420px and down) */
#media only screen and (max-width: 420px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) *\
#media only screen and (min-width: 420px) and (max-width: 768px) {...}
/* Medium devices (landscape tablets, 769px and up) */
#media only screen and (min-width: 769px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
When writing media queries for smaller devices coming from a computer-first approach rather a mobile first approach such as for cell phones and ipads, what are good ranges of width for smartphone size and Ipad size?
#media screen and (min-width: _____) and (max-width: _____)
{
code
}
Media queries change all the time based on new devices and screens. It really depends on what you're trying to target.
But here's a great resource that can make like a little simpler
www.css-tricks.com/snippets/css/media-queries-for-standard-devices
Cheers and happy coding!
computers/laptops usually begin at 1200px, so when designing a website try to have your main container have a max width of 1199px so it will work on all computers and laptops.
ipad horizontal is 1024px,
ipad vertical is 768px.
cellphones will max out at 500px,
iphone 6+ is 414px,
iphone 6 is 375px,
iphone 5 and below is 320px.
androids range from 320px-500px.
I'm using media queries in my css:
/* Tablet */
#media (max-width: 979px){
}
/* Phone */
#media (max-width: 767px){
}
When I drag my browser really small on my desktop computer it switches to the phone layout, is there a way to prevent this so the small size is only seen on the phone?
There isn't really a need to do this. This is the point of responsive, it's device-agnostic. So if a user comes to your site on desktop but their browser is really skinny the content will fit it (such as the Windows 8 Metro IE10 sidebar thing). You don't want to limit it only to phones, once you've done that you're going down a road that isn't meant to be traveled with responsive.
Sure you can, but the question is you really think the overkill need for it will be valid?
You can add a class to the HTML tag for phone devices (using JavaScript or any other method to verify if its a phone or not) and use this class inside the #media so only when this class is applied the media queries will take effect, small example:
HTML:
<html class="phone-device">
</html>
CSS:
/* Phone */
#media (max-width: 767px){
.phone-device{
}
}
But again this is not the right thing to do...
I do not understand why Twitter Bootstrap is considering the tablet size from 768 to 979, and not from 768 to 1024 (iPad). The problem is that if a client requests a custom design for tablet, that tablet design will not be visible on iPad in landscape mode.
Also if I have a content with sidebar (span9 + span3), if the sidebar is "hidden-tablet", the content will not expand, in fact it will have the same size and I have to overwrite bootstraps span dimmensions to achieve the desired layout.
Am I doing something wrong?
1) I think the idea here is that in general if someone is requesting a page that is over 980px its more likely that its from a desktop computer than it is from an ipad. Also you could just make your page ipad AND web friendly for those widths :).
If you have to have a different design for landscape ipad and the web, an option would be to do write a bunch of custom css for when the screen is between 980 and 1024px.
#media (min-width 980px) and (max-width: 1024px) {
//my custom css for ipad landscape
}
2) You are doing it right. All .hidden-tablet does is set display: none;
#media (min-width: 768px) and (max-width: 979px) {
// ... some other code
.hidden-tablet {
display: none !important;
}
}
It does not do any other type of resizing, so thats on you to do with media queries.
My website images look blurry for users with retina displays. (For example, on the Retina MacBook Pro).
How do I serve high-resolution images to visitors with retina displays, but standard-sized images to everyone else, while keeping the image the same apparent size?
In your HTML, create a <div> like so:
<div class="ninjas-image"></div>
And in your CSS, add:
.ninjas-image {
background-image: url('ninja-devices.png');
width: 410px;
height: 450px;
}
#media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ninjas-image {
background-image: url('ninja-devices#2x.png');
background-size: 410px 450px;
}
}
The magic here is in the CSS #media query. We have a double-sized image (ninja-devices#2x.png) that we sub-in when the device reports a ‘device pixel ratio’ of 1.5 (144 dpi) or more. Doing it this way allows you to save on bandwidth by delivering the original, smaller image to non-retina devices, and of course it looks great on retina devices.
Note:
This answer was updated in 2016 to reflect best-practice. min-device-pixel-ratio did not make it in to the standard. Instead, min-resolution was added to the standard, but desktop and mobile Safari don't support it at the time of writing, (thus the -webkit-min-device-pixel-ratio fallback). You can check the latest information at: http://caniuse.com/#feat=css-media-resolution.
We've been using the following to handle multiple cases where the ratio is 1.5 or higher - this takes more devices and browsers into account:
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
We have our entire site Retina enabled: http://www.embraceware.com/