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.
Related
This small HTML code represents my HTML5 page very clearly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pebble Go</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<style>
#media only screen and (orientation: portrait) {
html, body {
background: #222;
}
}
#media only screen and (orientation: landscape) {
html, body {
background: #000;
}
}
</style>
</body>
</html>
And so, on desktop browsers, Android tables and phones - it's working fine. But on iPad mini - it is not! … Result is - background is always gray. So my question is:
Why is this media query not working on iPad mini … ??? …
PS: I know that I have to use the max-device-width property as well, but I have a big reason not to do it! …
The requirement for this page is to be 100% wide and high, and I decided to:
Make the default CSS rules for landscape mode;
Define rules for different widths in landscape mode;
Define the portrait variants, relying basically on "orientation: portrait", and define different widths as well.
I did this! It's working! … Except the iPad mini !!! … And if I use max-device-width or something like this - then I'll be in a situation where I'll have to write different rules for landscape - different widths, portrait mode - different widths, and then mobile devices - landscape and portrait … !!! ….
The problem appeared to be caused by the clause in the meta tag for the viewport, and more specifically: "height=device-height". Removing it made everything work normal :) ...
I have been using some media queries for the i Pad and they were working fine until two,three day ago. But they just stop working. My i Pad is not recognizing the media queries while they are still working in Firefox native responsive design test view and other online websites to check the responsive designs.
My initiative queries are with view port in header
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2"/>
#media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { //for landscape
#media screen and (min-width: 755px) and (max-width: 1024px) and (orientation : Portrait) //for portrait.
Then tried these ones too
#media screen and (min-device-width: 768px) and (orientation:portrait){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#media screen and (min-device-width: 1024px) and (orientation:landscape){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape) {
//Also in addition i tried the other view port meta tag too
like
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=2"/>
But no luck
I don't know where I am doing mistake but this kind a important. Please help any kind of help will be appreciated
Try the meta content:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">
I don't know why this was ever working. I believe the issue is because you are using screen, this media type is reserved for regular computer screens.
Here is a list of the media types:
all: All media devices
aural: Speech/Sound Synthesizers
braille: Braille tactile feedback devices
embossed: Page Braille Printers
handheld: Small/Handheld Devices (like Smart Phones) [NOTE: Android, iOS, & other smart phone browsers ignore this rule.]
print: Printers
projection: Projected Presentations (like slides)
screen: Regular Computer Screens
tty: Media that uses a fixed-pitch character grid (like teletypes &
terminals)
tv: Television-type Devices
Warmth,
Crystal Miller
For my site TheExpeditioner.com I have added mobile specific CSS beginning with:
#media only screen and (max-width: 767px) {
I have also included <meta name="viewport" content="width=device-width, initial-scale=1"> in the header.
However, my site will not display the mobile CSS in mobile devices. Am I missing something? Is this something to do with Wordpress and/or plugins?
Here is 1 thing that my eye caught for now
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
its at line 1499, and there is no closing bracket.
If you go here on an iPad, and click through to Chapter1 > Chapter 1 > Get started... you will see after a loading screen the Chapter 1 page.
Basically what this is, is html embedded into an iframe being pulled together by HTML5 and JavaScript. the html in this iframe calls its own css sheet called other.css. The html file that pulls this all together is calling a stylesheet called styles.css.
Obviously I want in portrait view the content area of this iframe to be smaller than in landscape. I am using the css in other.css :
#media only screen and (device-width: 768px) and (orientation:landscape) {
#content {background:green;}
}
#media only screen and (device-width: 768px) and (orientation:portrait) {
#content {background:blue;}
}
The problem is that its like it doesn't even see the portrait css. I have tried a dozen different ways ( this is supposed to be the correct way and works for the styles.css adjustments to the whole page) but it will not recognize it. It will only use the landscape. Its not as though it wont see the media queries, it pulls the landscape CSS. But WILL NOT use the portrait. Really weird. If you see green for the bg in portrait and landscape its ignoring the portrait. If you see blue it's working. How can I achieve this?
If I get rid of landscape CSS, it prefers the default to the portrait. makes no sense. Could the iframe be hindering its pulling in new CSS upon orientation change?
You should target min or max device widths or you will miss out devices.
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here's an explanation why you probably shouldn't even be that specific http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
what you could try doing is creating two different stylesheets specifically for desktop & Tablet so;
<link rel="stylesheet" media="screen" href="css/stylesheet1.css"> <!--Desktop-->
<link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> <!--tablet-->
and dont forget to add;
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
http://webdesignerwall.com/tutorials/css3-media-queries
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.