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">
Related
My HTML apps is having almost the same layout on any size mobile device & tablets or PC.
Even font uses to adjust as per the screen size. I can also zoom in & out to my app when I open it in chrome browser
But when I convert this html app to android app using cordova, My android app does not show same flexibility.
Fonts do not fit on screen & I cannot zoom in/out my Android app. Also, app layout does adjust as per screen size.
I have used viewport tag in my HTML app.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
My Cordova source ;---
https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/source/test
Cordova Android app genrated for Android 4.3 :--
https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/samples/Android/4.3/Multiple_multi_houses
Main css file on which layout depends :--
https://github.com/dinguluer/UiMagician/blob/master/samples/cordova/source/test/www/css/multiFloorStyle.css
Am I not following cordova responsive web design standard ?
Do I have to change the dimention in css file as per vw & vh variables of viewport ?
If yes then how to do it for my static css file multiFloorStyle.css ?
Please suggest.
for better look and feel, font-size , images use media queries in css then you can get.
<style>
#media (max-width: 600px) {
.facet_sidebar {
font-size: 1em;
}
}
</style>
for zoom issue modify your meta tag, your made it user scalable false , thats why its not zooming
use this:
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=2; initial-scale=1.0; user-scalable=yes"/>
I'm having a difficult time with a mobile site I'm creating.
Everything is working as expected on all of the devices I've tested, and all of the different mobile browsers I've tested, aside from one: Chrome (v38.x) on Android (Nexus 7)
Essentially, what is happening is that everything is seems to be blown up/zoomed in, and it's making the site layout look ridiculous.
I'm using the meta viewport tag and em-based media queries to show different layouts depending on the device.
Here is a very simple example of what's happening:
<head>
<title></title>
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
</head>
<body>
<div id="top">Font size: 1em</div>
</body>
JSFiddle: http://jsfiddle.net/t6fdb3ak/3/
And below is a screenshot of how this displays on the Android Chrome browser.
This seems absolutely wacky, why is this happening?
Also, if I alert the innerWidth of the window on this page, I'm getting 121px instead of 980px.
<script>
alert(window.innerWidth);
</script>
I solved the problem after reading some of this page https://developer.chrome.com/multidevice/webview/pixelperfect
I removed the semi-colons from the viewport meta tag, and replaced them with commas, like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is how it looked before:
<meta name="viewport" content="width=device-width;initial-scale=1.0;" />
Hopefully everything will still work in the other browsers. I'll report back if not!
Try to import bootstrap, They have a build in viewport, if you use that it will work for sure.
I rewrote my web site to be formatted for mobile devices. However, the display width is inconsistent on different devices. On my android device the width looks fine but on another person's android device the width is much smaller and therefore unreadable.
I use the following viewport in my html file:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /
This is my main div in the html page:
<div id="maindiv" style="margin-left:1.0em; margin-right:0.5em">
Do I need to put a width paramter in my main div? Or can anyone tell me what I should do to ensure a uniform body width for mobile devices?
you'll need to build a responsive site. If you have fixed widths on divs you'll need to use css media queries. Since IE 8 and older don't support media queries you can use a plugin like respond.js. With this plugin you'll only need to add it to your page and use media queries like you normally would.
Do you have a link to the site?
Media queries can be used for targeting specific browser/device width so you can style things only when the browser/device meets that media querier specification.
However, if you change #maindiv width to 100% or use max-width, I believe this will fix your problem. Also in an external style sheet or on the page you'll want to add the following css to make your images responsive:
img {
max-width:100%
height:auto;
display:inline-block;
}
Also remove:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" />
and put:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">
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've a very simple static web page (only css and links, no scripts).
It looks good on android and iphone, but too small. I'm guessing they put it smaller since it work for most of the sites.
How can I override this and make him look the size I want it to be?
Android automatically adjusts to the size of your site, try to use width:100% or smaller than around 310 pixels (scrollbar takes space) for normal viewmode.
For IPhone try using this code to force the correct size
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Also to force font-size try to use this code in your css:
-webkit-text-size-adjust: none;
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
The list should be comma-separated.