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.
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 experienced a weird bug in Android´s (6.0.1) Chrome Browser (54.0.2840.68) when it comes to text-shadow rendering with large fontsizes and blur. It was also reported to appear in MacOS Chrome although i could not reproduce it.
I condensed the problem into a small pen for further investigation:
http://codepen.io/quarkus/pen/BQaBGj
This is, in short the styled headline i am trying to render.
h1 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 60px;
margin: 0;
color: white;
line-height: 1.2;
}
h1.shadow {
text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1);
}
The classes .filter, .fix3d and .fix are just attempts to fix this problem by rendering the headlines in a 3d context (or by creating the shadow as a blurred :before).
This is how it looks an most android devices:
s.codepen.io/quarkus/debug/BQaBGj on the device
Has anyone ever experienced that kind of rendering and can point me to a solution ?
Thanks
Markus
EDIT: forgot one thing. it occurs only if the page is "scaled" either by the user itself or by stting an meta-tag like:
<meta name="viewport" content="width=device-width, initial-scale=1">
as it is in the pen.
I'm definitely getting this on Browserstack devices (Galaxy and Nexus phones), I've not seen it on a device, but I don't have tons of devices to check.
However what fixed it for me was transforming and blocking the text:
.text {
transform: translateZ(0);
display: inline-block;
}
Not an excellent fix as I need my text to display: inline but it works.
I've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.
The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:
.article_body table {
width: 100%;
}
#media screen and (max-width: 479px) {
.article_body table {
width: auto;
display: block;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
clear: both;
-webkit-overflow-scrolling:touch;
touch-action: auto;
-ms-touch-action: auto;
}
}
The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:
Beginning of the error
End of the error:
TESTS:
PC, Win 7 (IE 11, Chrome, Firefox) - OK
iPhone, iOS 9.3.1 (Chrome and Safari) - OK
Windows Phone (IE) - OK
Moto G - Mozilla Firefox - OK
Moto G - Google Chrome - failed (portrait only)
All the other posts within my blog are ok on all these browsers.
CSS test:
After some tests I've found out the error relies on display:block;.
If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.
What should I do to fix this?!
Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html
Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40
Chrome: 49.0.2623.105
I found the problem for the white area. It lies in the animate.css Change the following line;
<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">
Into this:
<div class="header-color col-sm-9 col-sm-offset-3">
I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.
You can probably also multiply this value by 10 to solve this problem.
Well, thanks to #JoostS insights I managed to fix this annoying error myself with this #media query for Chrome only:
/* #media queries for Chrome 29+ only */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) and (max-width: 479px) {
.fadeIn {
display: initial;
margin-left: 5% !important;
}
article {
padding-left: 5%;
padding-right: 5%;
}
}
See https://gitlab.com/snippets/17238 for more Chrome media queries.
After searching through related questions, I'm still unable to get media queries to work for my site (in progress):
http://codemusings.net/
I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport":
<meta name="viewport" content="width=device-width,initial-scale=1">
Using help from related questions here, I went to http://mediaqueriestest.com/, which reports my Samsung Galaxy S4 as having a device-width of 640px.
I'm using a separate style sheet in which to overwrite style rules in the main style sheet.
<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>
Inside mobile.css:
nav {
float: none;
width: 50%;
}
main {
float: none;
width: 90%;
}
.section {
background: none;
}
To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:
#media screen only and (device-width: 640px) {
html { color: red; }
}
However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.
I should also note I'm using Chrome on my Galaxy S4.
try with i think this should work
#media only screen and (max-device-width: 640px) {
html { color: red; }
}
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