I am on a project that, when opened from a mobile device (in my case Android Browser 4.3), does not apply media queries.
To simplify the problem and show it on here, I have created a super simple ONLINE DEMO with just this code:
<!doctype html>
<html lang="es">
<head>
<title>EM TESTER</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
<style>
body{background-color: yellow;}
#media screen and (max-width: 25em) {
body{background-color:red;}
</style>
</head>
<body>
<div style="font-size:300%;">25 EM TESTER</div>
</body>
</html>
When I open this from my mobile, it should have red background as it is less than 25 em width, but it does not apply this.
This works properly on Chrome on my Android, but not from my Android browser 4.3. I have tested this on almost 10 devices, and all work properly (having background color red), even on other Android Browser versions.
Is there any known bug about this?
If I set media queries with PX instead of EM, it applies correctly.
Different browsers/devices have different issues, and mobile browsers are especially buggy. Is it just your phone or all android devices? It is probably just an issue related specifically to that browser or device. Test on other mobile browsers and see what browsers have the issue. Narrow it down and then you can start looking at a more specific problem. Also, double check your mobile browser screen width, that can be confusing sometimes.
Related
I made some simple .swf object (Actionscript 2) and wrapped it with Ruffle:
http://www.tanadsplinare.com.hr/test1/3.htm
Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
var file = '3';
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("DOMContentLoaded", function() {
var ruffle = window.RufflePlayer.newest();
var player = ruffle.createPlayer();
var container = document.getElementById("container");
container.appendChild(player);
player.load(file + '.swf');
});
</script>
<script src="ruffle.js"></script>
I can open it in FF and Chrome on PC/Laptop (however, Chrome is displaying the play button at first, but that's another issue, I guess I could overcome it).
But I failed to open it on my Android phone using Chrome. I know Ruffle is supported on mobile browsers, because I've opened already sites like: https://www.albinoblacksheep.com/games/bloxorz
Here are some variations, also not working:
Same thing, but scripts moved within body tag:
http://www.tanadsplinare.com.hr/test1/ruffle1.htm
DOMContentLoaded event fires as it should, and I proved it with an alert.
Take 2: Flash object and just ruffle plugin (according to documentation, this is enough. And yes, this works on FF and Chrome, but not in mobile Chrome)
http://www.tanadsplinare.com.hr/test1/ruffle2.htm
Even more like Bloxorz: Flash object, configuring ruffle (like Bloxorz did) and ruffle plugin. And yes, this works on FF and Chrome, but not in mobile Chrome)
http://www.tanadsplinare.com.hr/test1/ruffle3.htm
All possible listed variations work fine on PC/Laptop browsers, but not on mobile (Xaomi Redmi 6, Android, Chrome)
The thing is as I found out in Ruffle forum, this latest version of Ruffle SDK is not so well handled in Chrome 91 on Android, and should be in future update of Chrome 92.
Therefore, I used SDK from the site I noticed that Ruffle/Flash objects were working OK (turns out it was Ruffle ver from January):
https://www.albinoblacksheep.com/script/ruffle_nightly_2021_01_26_selfhosted/aafdd926c74ff1ff1e03a02091c0405b.wasm
https://www.albinoblacksheep.com/script/ruffle_nightly_2021_01_26_selfhosted/ruffle.js
I imported in my site and it works (almost) fine.
This is my Client website Click here, it is responsive on all screen which work good on desktop all browsers, Ipad all browsers but i am facing issue on android mobile browser like Chrome and Firefox.
I have one other browser on mobile which is provided by Asus default browser, website working responsive perfect on that..
I tested on multiple Android devices facing responsive issue.
Yes there is viewport meta tag already there
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">
Any help will be appreciate..
I am using cordova with jquery mobile for one android app.
For Viewport meta tag i am using below code
<meta name="viewport" content="width=device-width,
initial-scale=1.0;maximum-scale=1.0;user-scalable=0; target-densitydpi=device-dpi">
With older jquery mobile version it was returning actual height and width of device but when i have upgraded jquery mobile to 1.4.5 and cordova to 5.0 then it is returning some different resolution with window.innerHeight and window.innerWidth
Based on this resolution i am taking css files with media query
Please help me with this
Regards,
Bindal
My current workaround:
In index.html: <meta name="viewport" content="user-scalable=no, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, width=device-width, viewport-fit=cover">
In index.css the "body" part, add: transform-origin: 0px 0px; transform: scale(0.5);
window.innerHeight and window.innerWidth has the native resolution.
But haven't run test if one pixel is one pixel. Also I don't have enough device to test if it works across different device and different version of android.
With this mets it works for me, try it
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
Media queries are the wrong approach for several reasons:
you will not get an exact match for your screen, proportional layout is for some elements impossible
You will not be able to target Android 4.0+. Quad-HD and older devices use the same proportion with different -device-pixel-ratio factors. Factors are interpreted differently through Android versions, so some displays will be messed up
media queries are intended to supply DIFFERENT visuals for different resolutions, not the same visual scaled across resolutions
I recommend using https://github.com/biodiv/cordova-anyscreen (and drop jquery mobile). It will also give you the correct display and available resolution as app.deviceWidth, app.deviceHeight and app.containerWidth etc.
I have browsed through many topics here and on the web, trying to solve my issue. I'm very close to finding a solution but there is one thing that is still not working correctly.
I have a mobile website that is 640px wide. It should:
Show zoomed in on all browsers correctly, also when changing the orientation of your device
User should not be able to zoom in (input fields neither).
I have used this viewport meta tag to accomplish this:
< meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" />
This works great on Android, both portrait and landscape. It works great on iOs on portrait too, but it shows the site zoomed out on landscape, so it's not adapting to the width of the phone, but keeps the original portrait size. I have tested this on iPhone 5 and iPhone 4S.
I have found mostly issues with responsive websites and not so many with fixed mobile websites. Is there a solution for my problem by changing the viewport meta tag? Or should I be looking into javascript to solve this?
Thanks in advance.
Edit:If anyone is interested, I used this bit of code in Coldfusion which is working perfectly fine now (iOs & Android):
<cfif findNoCase('iPhone', cgi.http_user_agent,1)><meta name="viewport" content="width=640" /><cfelse><meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" /></cfif>
I tend to use those lines in my head to optimize responsive sites:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
Maybe adding those will fix your problem?
I know from experience, that iOS Safari behaves strange in some cases. Here is a line that I use to fix some other issues I had with it before:
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->
Alternatively you can try running your site as iOS Web-app:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
Hope that some of that will fix your problem:)
I have just developed an iPhone app using Phonegap and I now tried to post it to Android using Android SDK and guide available on Phonegap website. Everything works good except screen resolution and as I tested it on Android Emulator setting Nexus One Resolution, I found everything is too small and leaves half the screen empty. Is there a setting I need to put to make it exactly float like on iPhone?
UPDATED
I am using this viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
Use meta Veiwport tag or CSS media queries for multiple screen support
References :
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.quirksmode.org/mobile/viewports2.html
http://www.quirksmode.org/mobile/tableViewport.html#metaviewport