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.
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.
I have got my website working everywhere except the default "Internet" browser on the Droid phone. It looks great in Chrome on the phone. It passes all the Google tests for mobile ready. It looks good on iPhone. Here's the site ... http://beavercreekmarina.com.
It's driving me crazy. Does anyone know why?
I had the same issue, i put this code in
<head>
<!--[if (gt IE ) | (IEMobile)]><!-->
<link rel="stylesheet" href="../css/ie.css">
<!--<![endif]-->
and made css code just for ie
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 can not disable autocorrect of text input in web browser on Android.
I tried this:
<input type='text' autocomplete='off' spellcheck='false' autocorrect='off'>
Demo:
http://jsbin.com/coqum/3
Both Chrome 35 and Firefox 29 do autocorrect on Android 4.4. Is it an Android bug?
Is there a way to ask Android not to autocorrect?
Update (March 2015)
It looks like the bug has been fixed in Chrome on Android, it now obeys autocomplete='off'. Firefox on Android still autocorrects.
Demo: http://jsbin.com/jivupadolu/1
In experiencing the same issue I did some digging and discovered it is indeed a bug in Chrome for Android. It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...
Currently autosuggest="off" does not work. I reported a ticket for it, so you can vote.
Steps to reproduce the problem:
Open https://output.jsbin.com/qacoforama/3?output in mobile Chrome.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome Android autocorrect</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h3>Android keyboard shows suggestions on typing</h3>
<p>when autocorrect="off"</p>
<p><input type="text" autocorrect="off" autocomplete="off"></p>
<p>Tested in Chrome 70.0.3538.80</p>
</body>
</html>
Try to type something in the input field
You will see keyboard suggestions
What is the expected behavior?
You should not see any suggestions, because "autocorrect" attribute on input field set at "off"
What went wrong?
One picture with suggestions is Chrome, and another one without suggestions is Safari
Did this work before? Yes It initially started to work in Chrome 38, can't say about other versions and when it became broken
Does this work in other browsers? No
1) Mobile Safari
There is no such problem in mobile Safari. The keyboard does not provide any suggestions when autocorrect="off"
2) Mobile Firefox
The same problem as in Chrome: autocorrect="off" does not work, so one can see some suggested words
Chrome version: 70.0.3538.80 Channel: stable
OS Version: 7.0
Flash Version:
There is an old issue where the same problem was described https://bugs.chromium.org/p/chromium/issues/detail?id=303883.
As a result the issue was resolved and autocorrect="off" was honored.
But at some moment it was broken and still does not work.
https://bugs.chromium.org/p/chromium/issues/detail?id=901839
Please try this: http://jsfiddle.net/c9HQT/
Basically you are using Javascript to set the value after every keystroke, hopefully interrupting the auto-complete.
$('input').on 'keypress', ->
console.log $(this).val()
$(this).val $(this).val()
I have a basic HTML Table. It renders as expected on a PC. But on a mobile browser (tested on firefox and chrome on Android) some rows are large and some are small like this. I have uploaded my code here (QR Code).
Why is this happening? and how to fix this?
Got solution from a different question. Adding a viewport tag in the <head> section, will prevent device scaling/zooming and give a uniform look across mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0" />