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:
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 currently using intel XDK to build a HTML5 android app. App files were created with Cordova command prompt, and HTML assets was done using JQuerymobile. Files were transfered to Intel XDK for the building process and apk was obtained. However, when I install the app on some phones (Samsung Note3, Android 4.3) it appears the page is zoomed in, and displays like when you try accessing a non-responsive desktop website using a phone.
However, when I installed same app on A Samsung S5 (Android 5.0), the app displays properly the way it should be.
How can i fix this? will the meta viewport tag help? See attached screenshots. Kindly help please.
This is how it appears on the Samsung Note 3
This is how it appears on the Samsung S5
This is the current viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Pls help!
Try building using the "Crosswalk for Android" build, this will embed a more advanced runtime with the app. This will give you consistent appearance and performance regardless of the Android device version.
Changing the target-densitydpi did the trick.
Change from target-densitydpi=device-dpi to target-densitydpi=medium-dpi or remove altogether.
I made a webpage in bootstrap(V3). Everything is working fine, except the XS is not triggering on XS devices that are running android. Its working fine on iOS devices. How do I get XS to trigger on android but not mess up others.
When I used JS to check the screen sizes on android phones it says 980px.
Sorry if the question is not formatted correctly. English is not my first language.
I figured it out. I was missing the meta tag in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
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