I'm testing on both Nexus 4 - 4.1.1 - 768x1280 and Xperia Z - 4.2.2 - 1080x1920... In both cases, my site (which is responsive on desktops) is only partially responsive in android phones. WP8 works fine (surprisingly) - and iPhone 5 works - except the height is a little more than it should be (sticky footer isn't showing up). It's as if the CSS thinks there's an extra 100px or so - things are just slightly cut off when they shouldn't be. An example media query:
/* if device is less than 768px */
#media (max-width: 768px) {
.container{
width: auto;
max-width: calc(100% ~"-" 20px);
margin-left: 10px;
}
.banner-info{
padding-right: 15px;
width: auto;
max-width: 300px;
font-size: 13px !important;
}
}
In my header:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What's going on here?
Try adding target-densityDpi=device-dpi to your meta viewport. It's an Android specific value.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
UPDATE:
I recently found out that target-densityDpi is no longer supported. I solved a similar problem by combining -webkit-min-device-pixel-ratio with max-width while also not using target-densityDpi in my meta viewport:
#media all and (max-width:360px),
screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px),
screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) {
// CSS HERE
}
http://caniuse.com/#feat=calc
The version on Android you are using does not support calc and you must provide a fallback. I suggest something like this:
width: 90%; /* fallback */
width: calc(100% - 20px);
But now your pixel-based margin is not going to result in a centered layout. At that point, I suggest you just forget the "calc" altogether and use plain 'ol css:
width: 90%;
margin: 0 auto;
Adroid phone like the nexus or Galaxy serie have a "retina desplay" mening the pixel ratio is 2 so you have to add this (-webkit-min-device-pixel-ratio: 2)
so
#media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)
I used this code in header
<meta name="viewport"
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
it worked for me
Related
I found how to force the horizontal orientation under a certain resolution, and on android work fine, unfortunately it also rotates on the desktop when the window falls within the specific resolution.
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
I'm also looking for a way to send mobile phone users to another page where to use this system, but it's also based on the resolution of the device:
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
How can i get forced horizontal orientation only on android and ios (i'm especially for Android)?
or
How can i send these users to another page with forced orientation?
Thanks!
I'm using the media screen query in my css but the problem is that it's not rendering for mobile. It renders for computer screen sizes but when it comes to mobile devices it doesn't work.
Here is my css
.featured-post-image{
position:absolute;
left:0;
right:0;
width:100% !important;
height:100%;
max-height:700px !important;
}
.wrap{
position:relative;
padding-top:37em;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
.wrap{
padding-top: 5em !important;
}
}
With this in my header
<meta name="viewport" content="width=device-width, initial-scale=1">
What I am trying to do is change the padding on .wrap and it's not working. Can anyone tell me why it's not working?
#media (min-width: 320px) and (max-width: 480px){
.wrap { padding-top: 5em !important; }
}
You forgot the curly braces in #media.
For Mobile Responsive you have add these things :
In Header :
// Browser rendering properly
<meta charset="utf-8">
// Select device view port width
<meta name="viewport" content="width=device-width, initial-scale=1">
// for device touch gesture
<meta name="HandheldFriendly" content="true"/>
In CSS :
#media screen and (min-width:992px) and (max-width:1200px){
// css goes here
}
#media screen and (min-width:768px) and (max-width:991px){
// css goes here
}
#media screen and (max-width:767px){
// css goes here
}
I have added my media Queries and seems when i run under this site it does not displayed the right output i expected..This is the First test i did for this mobile
this is my media Queries
#media screen and (min-width: 768px) and (max-width: 1024px), (min-device-width: 768px) and
(max-device-width: 1024px) and (orientation : landscape) {
.wrap{
width:95%;
}
.box{
width:29.33%;
float:left;
margin:0px 42px 0px 0
}
html{
background-color:red;
}
}
I did a troubleshot on body and html however the background color not displayed
this is my site
My CSS
.wrap{
width: 90%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.box{
width: 29.33%;
float: left;
}
I have added my media Queries
But you've forgotten a key ingredient in media queries, which is the meta viewport element. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1">
You need to place that in the head of your pages for media queries to operate.
In your html file you have
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
That's older, I would replace it with html5 doctype
<!DOCTYPE html>
BTW that place looks nice.
I'm testing my website on mobile devices, but, while on iOS it works great, on Android it doesn't: the site is zoomed in and it is unresponsive.
In my tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
while in my CSS there is:
#media only screen and (min-width: 979px) {
.isStuck {
background-color: #000;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
}
#media only screen and (max-width: 979px) {
#stuck_container {
position: relative !important;
box-shadow: none;
}
.pseudoStickyBlock {
height: 0 !important;
}
}
The Android stock browser changed extensively as of Android 4.4, so if limiting your application to that version is possible, you may find it works fine, according to a Google code issue here.
I would advise targeting handheld rather than screen however, as many mobile devices identify themselves as being handheld devices.
#media handheld, screen and (min-width: 979px) { ... }
A previous question also suggested targeting the device resolution instead.
I’m working on making stylized responsive classes for buttons. The text within the button should be the same size as the rest of the text on the page, and it works fine when resized on desktop, but when the pages are viewed on tablet/mobile, the size of the text in the button is much smaller than the normal text (its almost as though the em unit has changed sizes). This has happened in all tested mobile browsers—safari, chrome, and default android browser—and no matter the HTML element the class is being applied to (button, div, p).
I have another stylized class for a side menu that is experiencing the same text-shrinking effect (different class being applied to an ul). Interestingly, the shrunken text of the menu is the same size of the shrunken buttons’ text, so whatever text size transformation is happening to one is happening to another.
Any ideas on how/why this may be? Could it be related to the ‘auto-zoom’ of the mobile browser or something? I’m fresh out of ideas, and would love to hear any thoughts on the matter
.blueButton, .greenButton{
display: inline-block;
padding: .5em .5em .5em .5em;
text-align: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px #636363;
border-radius: .3em;
box-shadow: .25em .25em .4em 0px #636363;
}
.blueButton a:link, .greenButton a:link, .blueButton a:visited, .greenButton a:visited{
text-decoration: none;
color: white;
}
.blueButton:hover, .greenButton:hover{box-shadow: .25em .25em .4em 0px black;}
.blueButton:hover{ background: #0b3a74;}
.greenButton:hover{ background: #9ec83d;}
.blueButton{ /*gradients for different browsers- 1)Safari 2)Opera 3)Firefox 4)Standard*/
background: -webkit-linear-gradient(left top, #3c78cc , #0b3a74);
background: -o-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: -moz-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: linear-gradient(to bottom right, #3c78cc , #0b3a74);
}
.greenButton{
background: -webkit-linear-gradient(left top, #caf170, #9ec83d);
background: -o-linear-gradient(bottom right, #caf170, #9ec83d);
background: -moz-linear-gradient(bottom right, #caf170, #9ec83d);
background: linear-gradient(to bottom right, #caf170, #9ec83d);
}
Media queries:
#media all and (min-device-width: 1101px)
#media all and (min-device-width: 768px) and (max-device-width: 1100px), (min-device-width: 1101px) and (min-width: 700px) and (max-width: 900px)
#media all and (min-device-width: 240px) and (max-device-width: 767px), (min-device-width: 768px) and (min-width: 240px) and (max-width: 699px)
#media all and (max-device-width: 239px), (min-device-width: 768px) and (max-width: 239px)
Add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in your <head> section.