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.
Related
The media queries were working correctly. Had an issue with the linking of my stylesheet. Thanks a lot for your answers! Won't delete this questions to keep the knowledge to the community
I'm struggling with my media queries. If I resize my browser window they work properly, but when I emulate mobile devices (IOS and Android) with the Google Chrome device emulator, they won't work.
#media (max-width: 650px)
Adding only a screen or a min-width doesn't change anything. The viewport tag is set.
Is there anything I need to know? Thanks a lot!
You should set the meta viewport tag in the html header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And you could add !important to the media query rules to check if other rules are overriding them
You can try this code:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Also, set a meta viewport tag in your HTML head component
<meta name="viewport" content="width=device-width, initial-scale=1">
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 :)
I have android program that use view web server local HTML. But HTML don't work well in android device emulator. I use these CSS codes but it doesn't work.
#media screen and (-webkit-device-pixel-ratio: 1.5) {}
#media screen and (-webkit-device-pixel-ratio: 0.75) {}
And these below CSS codes, it work for browsers but it doesn't work well for android emulator.
#media screen and (min-width:960px) and (max-width:1200px){}
#media screen and (min-width:720px) and (max-width:959px) {}
#media screen and (min-width:640px) and (max-width:719px) {}
#media screen and (min-width:480px) and (max-width:639px) {}
#media screen and (min-width:320px) and (max-width:479px) {}
Could someone tell me the CSS codes that work for phones and tablet, landscape and portrait. Thanks for answer...
I'm not entirely sure I understand your problem, however if you're having the problem I think you are: try this:
<meta name="viewport" content="width=device-width" />
Your second version should work seamlessly:
#media screen and (min-width:960px) and (max-width:1200px){}
#media screen and (min-width:720px) and (max-width:959px) {}
#media screen and (min-width:640px) and (max-width:719px) {}
#media screen and (min-width:480px) and (max-width:639px) {}
#media screen and (min-width:320px) and (max-width:479px) {}
Because the first version relies on device pixel ratio not upon the actual screen sizes. Did you insert the viewport meta tag in the head?
Try Adding this in head section.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and in css file write media query as follows.
#media only screen and (min-width: 600px){
}
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.
The basic question:
Is there away I can set the viewport meta tag to only come into effect at 768px and below?
Reason:
I've built a responsive e-commerce site using standard #media browser sizes:
Over 1200px
1025px to 1199px
980px to 1024px
768px to 979px
Due to the complexity of the site it's not viable, time or layout wise, for me to use #media queries to make the site usable for mobile browsers so I'd like to use the viewport meta tag to force all small mobile browsers to display the 768px to 979px layout.
To do this I can easily use:
<meta name="viewport" content="width=768px; />
The only problem with that is that it over-rides the 980px to 1024px #media queries designed for iPad landscape, and forces iPad Landscape to display the smaller layout I designed for iPad Portrait, i.e. the 768px to 979px layout.
The answer to my prayers would be if I could set the viewport meta tag to only come into effect at 768px and below - is that possible?
BOOM! FIXED!
Right, this was a miserable waste of 6 hours but it's done and working now, hope this helps someone!
First of all, I included a pretty standard Viewport Meta Tag in my functions.php file:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
I then used jQuery Mobile in my header.php to look at the browser width and to change the Viewport size to 768px IF the browser width was below 700px:
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<meta name="viewport" content="">
<script>
if($.mobile.media("screen and (max-device-width: 700px)")) {
// Change viewport for smaller devices
$('meta[name=viewport]').attr('content','width=768px');
}
</script>
This works great - it keeps my nice, responsive layouts for iPad Landscape and Portrait and gives a nice viewport size for mobiles. Lovely