I know that the question may cause confusing, but I am having problems with my CSS #media queries, specially with the screen orientation.
I have this on the <head> of my page:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
And a simple CSS #media queries that changes a style of an element when the screen is portrait:
#media screen and (orientation: portrait) {
#login_container {
width: 60%;
}
}
So the problem is when I press on an <input type="text">, [It is happening to me only on Android devices] and when the keyboard is opened for write with it, the browser recognizes my screen as landscape so my CSS #media queries is applying styles for landscape screens.
But the weird thing about everything is that it only happens when the <input> is type="text" or type="password", if not, the problem doesn´t happens.
I suppose that it is happening becouse when the keyboard is opened it resizes the browser window to other size, that (on some devices) is recognized as landscape, becouse window width is greater than window height.
I have been searching for a while on Google to find a solution, but I am unable to know how to fix it.
Thanks for any help!
Sorry I can't comment yet, but have you tried to set a #media query with px instead of portrait / landscape ?
I am pretty sure that your problem is, as you said, the size of your screen device, when the keyborad is opened, result as a calculation of with / height it becomes as portrait for your browser's point of view...
I asume it doesn't happen the same on a bigger screen smarthphones nor tablets, nevermind which browser is used. At least you could give it a chance and try it to clarify your doubt :)
Related
i have a issue in my Android page on input focus, i can't disable auto-zoom
only in (orientation: portrait) :
http://ufficio.web-project.it/smlapalma/akenta/invia-scusa.html
I have already try this codes:
meta name='viewport' content='user-scalable=0'
or
input:focus { font-size: 16px!important}
but nothing.
Thanks in advance.
Regards
Guido
This would be the right meta-tag:
<meta name="viewport" content="width=device-width, user-scalable=no">
But, this won't solve your problem because this meta tag doesn't change the size of your sites components. Let's say you have a <div> with the width of 1200px, the user's browser will view it 1200px wide.
I looked at your website, and the problem lies in the foundation of your CSS. You are using px a lot, where you might want to use %. If you use percentage, you will see that your site adjusts to the screen size. You should also use em as unit for font size instead of px. My tip is to avoid px-units as much as possible.
But of course, this means you will have to change your entire CSS, which is much work. But eventually this will solve your problem.
We recently developed a website that essentially has 2 modes, mobile and a tablet + desktop one. The css file is laid out with mobile rules first, then there is a breakpoint for any sizes above 640px, so we could show the desktop version to the 7" tablets when on landspace.
However, although it is working great for all iphones, my galaxy s4, even the windows phone and of course for the ipad and desktop, some mobile phones pick up the desktop styles, essentially showing the desktop version, namely the galaxy s2 and the galaxy s3 among others.
As i said, my css code is built mobile first, so all mobiles with a width of less than 640px (pretty much all) should not pick up the desktop styles, the media query is as follows:
#media all and (min-width: 641px) { .... }
So i do not really understand why.. any ideas?
edit: I forgot to add we have added a conditional that will check whether the size of the device is larger than 640, in which case it sets the viewport size to the full width of the website so it scales down on tablets, or else it just sets it to device-width.
<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
if (screen.width > 640) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=1000');
}
</script>
From what I search for Galaxy S3 Media Queries:
#media only screen and (max-device-width: 720px) and (orientation:portrait) {
.your-css{}
}
#media only screen and (max-device-width: 1280px) and (orientation:landscape) {
.your-css{}
}
Looks like thats what it actually looks for....You can try scaling it by changing viewport:
<meta name="viewport" content="width=device-width">
Also, You can add jquery to change sizes....Jquery:
// Check for device screen size
if($.mobile.media("screen and (max-device-width: 640px)")) {
// Change viewport for smaller devices
$('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}
Also:
You can go open this in your s3 so you can get accuracy for your Galaxy media queries:
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
Thanks for the input, i found the problem.
Some android versions have a bug where the viewport will not report correctly when the page loads, i was getting 800px viewport sizes reported for galaxy 1, 2 and 3 (!!!). The issue was fixed by adding a timeout of 200ms before actually checking the viewport width, it seems this small delay is good enough for the device to report back the right size.
It creates a small window of time (the 200ms) where the scaling of the desktop version is visible, but at least it solves the issue.
solution for anyone landing here having the same issue:
<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
setTimeout(function(){
if (document.documentElement.clientWidth > 640) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=1000');
}
}, 200);
</script>
I have a site, which in order to fit the content of some of the pages, the min-width of the site is 1170px. I also can't make a separate mobile version.
IPhones and Droids usually automatically resize the page in order to fit the width. However they seem to not resize the page if the height of the content is less than the height of the screen and then the width runs off screen.
Any ideas of what I should change? I don't know what edits to make that won't mess up the desktop presentation.
There are some way to do it the very important before anything else
if you target to work on in the devices just put that code before end tag of </head>
<meta name="viewport" content="width=device-width" />
then if you dont want to repeat your code just target the screen you want your website display using media queries
example below:
#media handheld, screen and (max-width: 320px){
.yourElementClassOrId {
width:100%;
}
}
#media handheld, screen and (max-width: 720px){
.yourElementClassOrId {
width:100%;
}
}
#media handheld, screen and (max-width: 620px){
.yourElementClassOrId {
width:100%;
}
}
but it easy to manipulate your site if your site already have flexible grid
hope this help
Try adding target-densitydpi=device-dpi to the meta viewport. This is Android specific.
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
you are using twitter bootstrap, and bootstrap-responsive.css is missing in your code.
I'm using a mobile emulator that I'm paying for where I can view my mobile site on many different cell phones and the theme across all the android phones are that for some reason, my media queries are not working. They are working on the iPhone, but not sure what is going on with adnroid. This is what i'm using for the android media queries:
#media only screen and (max-device-width: 400px) {
- styles here -
}
#media only screen and (max-device-width: 600px)and (min-device-width:401px) {
- styles here -
}
I have those sections in my stylesheet, which when I am using dreamweaver, all the different resolutions look good in the mobile sizes. Then I was thinking.. oh wait, android is automatically scaling the screen to make them bigger, so I added this to the top of my index:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
I added those, but STILL android isn't paying attention to the media queries for some reason. It's rendering the page as if the resolution doesn't match, even though the devices I have tried include a 480px X 800px so it should work there....
Anyone have any ideas? I know droid web page design info is kinda scarce.. but I'm hping there might be some gurus out there.... I stayed up all night last night working on this about 8 hrs straight lol.
EDIT: On further examination, it looks like anything less than 400px is working, however, it's the max and min device width being between 600 and 400 which is causing problems......
i removed the max-device-width:600px and it is now rendering the correct thing. not sure what had happened, but thats the answer, dk what i did.
Reorder your min value before the max value:
#media only screen and (min-device-width: 401px) and (max-device-width:600px) {
- styles here -
}
I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.
Why is the 480x720 (second media query) defaulting to the first media query?
#media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
#media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
#media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
#media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
What is expected:
What is actually happening:
Why is the 480x720 (second media query) defaulting to the first media query?
I am a newbie on android and CSS.
I resolved the android not giving they real size with one line in the header of my index.html file:
<meta name="viewport" content="width=device-width" />
From then on, my CSS files did what I expected!
So after doing LOADS of research i have come to this conclusion, Android phones that say they are 480px by 720px (800px or 854px) are actually not, they use a higher screen density to make elements look larger so they actually run at 320px by XXX, but the user can change the resolution to a lower spec if they so wish. The reason that the media query was not working, was because the sizes were not relevant to the device in question.
If your on the SDK i changed the screen density down to 160 to accommodate 480px wide.
And i can confirm i have tested this on the SDK and 2x Handsets.
Note: this was my personal experience it might be different for other users
I think you need to do a device resolution detection in your media query along the lines of
#media (-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min--moz-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
/* high resolution styles */
}
Check David Calhoun's excellent article on mobile best practices.
I was having the same problems while working on a Cordova application for Android platform. Thanks to the last answer, I tried to find out where were the differences between my media query and the width of the devices screen.
I first tried :
#media only screen and (max-device-width: 480px) { ... }
To match devices like HTC Desire HD | Samsung Galaxy S. But I also had to do specific corrections for the Samsung Galaxy Note, so I used :
#media only screen and (min-device-width: 481px) { ... }
But those resolutions, as said before, are not really used like that in the web view, the pixel density has the values changed.
So I wanted to know how many pixels in width were recognized in both DHD and SGS, and then in SGN :
window.innerWidth
For the 480px width phones, I had actually 320px recognized. For the 800px Galaxy Note, I only had 500px recognized. When I saw that, I adjusted my media queries and it worked.
here are a few things I have found in my experience and it may be due to the higher resolution detection.
My favorite test phone is 320px(max-device-width) X 480px(max-device-width) in portrait view. But depending on which mobile browser I use the max-width can be up to 850px!! Opera mobile uses 850px as its default max-width, even though its on a device of max-device-width 320px. Better yet; the built in Andriod browser on this device has a default max-width of 550px. Dolphin defaults to the same max-width, 550px. I don't usually test on FireFox mobile but since it is a gecko based browser like Opera, I wouldn't be surprised if it falls into the 850px range. Does anybody know or tested it?
i typically use a 3 condition media query when addressing 320 X 480 devices.
#media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}
also i usually place this meta tag in my header on the main pageenter code here
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The following didnt seem to help me, that's when I did some more research and figured out the info above.
<meta name="viewport" content="width=device-width" /> Hope it helps someone else.
Since cell phones are an ever-growing black hole of resolution confusion, you need to tell them to identify themselves. You also need to set the scaling to 1 and take away user scaling. When I put this in my code, it does the trick for me.
Insert this snippet in the head of your HTML on the line below the <meta character...> tag.
<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Convert all px values to em values by dividing them by 16 (so 16px will become 1 em). This makes sure, that sized have the correct proportion regardless on which font is used.
Add to your meta viewport: target-densitydpi=medium-dpi. This makes sure, that the em- sizes behave equally on all (most?) devices