Are the same methods used to write CSS only for iPhone in landscape mode?
Yes, sure. Check: http://www.w3.org/TR/css3-mediaqueries/#orientation
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
If you want to target iphone only you have to add the resolution or the dppx density to these MQ.
You could do this
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
That forces the iPhone to render viewport the same as the device width.
Then use this css to target the landscape mode, which is +320px wide
#media screen and (min-width: 321px){
//styles
}
If I understand you correctly, and you want to know the media queries to target a smartphone like the iPhone only when it is held horizontally, try something like this:
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
actually if you use :
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
then you prevent user to zoom at any time, which can cause usability problems.
I would recommand you to use :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In this case, you force your page to be displayed at it's original initial scale, and so then you can target different layout sizes with your media queries, as the layout will be resized when you will rotate your iPhone :
#media only screen and (min-width: 480px) {
/* landscape mode */
}
#media only screen and (max-width: 479px) {
/* portrait mode */
}
And the user can still pinch the page to zoom.
Related
I have a bunch of media queries that load a different background image depending on the width of the screen. For some reason my One plus 2, with a screen width of 1080 in portrait is triggering the (max-width: 400px) clause. Why?
I suspect it is something to do with pixel density. If this is the case, is there a list somewhere of the most common screen sizes when taking pixel density into account?
#media screen and (max-width: 1080px) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
#media screen and (max-width: 800px) {
.mainImage {
background-image: url('shop-home-vertical-800.jpg');
}
}
#media screen and (max-width: 600px) {
.mainImage {
background-image: url('shop-home-vertical-600.jpg');
}
}
#media screen and (max-width: 400px) {
.mainImage {
background-image: url('shop-home-vertical-400.jpg');
}
}
Edit:
The viewport I have is:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.
It looks like it could be a problem forgetting to set a viewport. Try including this into your head <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
This is caused by the device pixel ratio, which down scales the actual device ratio.
Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)
The following allows me to target the one plus two accurately.
#media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.
Just discovered that dppx is not well supported yet. This won't work on safari.
Is it possible to do it only with CSS?
Somehow combine this with some specific rule
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I'm not sure if there's a CSS way, but you could do it with JS by creating a script that inserts and removes this meta tag when in portrait mode and landscape mode:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
If the whole reason you wish to do this is because the website doesn't scale properly when the orientation changes, then this very same meta tag is useful for that, and can be done without disabling our much loved zoom by using:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it's not that great, as it disables zoom on some devices anyway.
I am working on a PC with screen resolution 1600x900.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page title</title>
<style type="text/css">
#media screen and (max-device-width : 600px) {
body { background-color:#F00; }
}
</style>
</head>
<body></body>
</html>
The problem is that I am trying to develop a resposive version of the site and while developing I want to use Chrome on my PC. I was expecting that when I resize my browser to width less than 600px, the media queries will run, but it seems to think my device width is 1600px and it never changes. How to make it fire the media queries while I resize the window on my PC?
Remove "device" from #media screen and (max-device-width : 600px) { :http://jsfiddle.net/7rSzr/
Making it:
#media screen and (max-width : 600px) {
body { background-color:#F00; }
}
"I want to use Chrome on my PC"
You can change device-width in the settings of the Chrome Developer Tools. Refresh your page after that and admire the red background ;)
I have recently started toying around with responsive web design and have done a basic test here:
http://test.studev.net/
It works fine in a desktop browser however I am getting a little confused on how to deal with the smallest width design when loaded on a high resolution device for example retina displays on iPhones. Because of this type of display it means for example size 16px which is normal to read on a desktop is impossible to read on an iPhone 4/5.
How is this usually dealt with?
Well either if you want to make the text smaller on mobile or bigger you would do
#media screen and (max-width: 480px) {
font-size: 10px; /* Smaller */
}
or
#media screen and (max-width: 480px) {
font-size: 20px; /*Larger*/
}
And make sure you have this in your <HEAD> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Or you can also disable zooming like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And for IE10 support, try:
#-ms-viewport{
width:device-width
}
You can choose the size of the font according to the screen-width:
/* 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;
}
To make sure your layout stretch on the mobile screen you have to use the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This meta tag needs to be inside the head tag. The "device-width" will be the maximum pixels your screen can show. You can also set a constant value there (600px).
The initial-scale=1 means it will be zoomed automatically to 100%. (0.5 => 50%)
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!