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.
Related
I'm struggling to get my android emulator showing a testpage from XAMPP for mobile development. I already tried the 10.0.2.2 and also my IP Adress. Both seem to work but the mobile browser is only showing up a blank page. So i think the page is found and simply not rendered correctly. The testpage looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Am I missing an important preference in XAMPP or something like that? On my PC (Windows 7) it works just fine.
Thanks for the help!
I think something is wrong with your browser on the emulator. First try some other browsers (like chrome, mozilla (for android), opera, etc). Because, If you are able to reach the server then you should also be able to load the page.
If that doesn't work, Try on different emulators like genymotion (use 10.0.2.3 instead of 10.0.2.2), bluestacks, etc.
I have created a small site on ASP.NET some time ago.
I have used:
ASP.NET and Bootstrap.
The issue is that all worked fine for few mounths, but today i have noticed that if i request Full Website version in Google Chrome on Android the site doesn't adapt.
All works fine on WP, iOS and even Android 4.4 with Chrome 51.0.2704.81
But my phone shows site not adapted to the screen size. My phone is Android 6.0.1 and Chrome is 52.0.2743.98
On desktop if i resize the Google Chrome window, the site gets adapted.
I have read some articles on stackoverflow, my index.html contains this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Here how it should look and looks on all devices:
Here how it looks on my Android 6.0.1 and Chrome is 52.0.2743.98:
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 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.
I have made a set of HTML5 pages using Jquery mobile. While developing I used Chrome, Safari & ripple emulator to see how my web pages were looking. I then put my pages on a local server and observed that in iPad & iPhone my pages were getting rendered properly but on Android browser the CSS effects would not work at all. All my jQuery mobile grids/themes went for a toss. Why would something like that happen?
I have used the Copy-and-Paste Snippets CDN hosted '.min' files for my stylesheets and javascripts, haven't downloaded them separately.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, target-densitydpi=device-dpi, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="style1.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
It may be an incompatibility between the android browser and the CSS you are using. OS version of ur android browser?