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?
Related
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've been working on an app for a bit now and finally tried it on a real phone (I'm using phonegap). It appears fine on my computer but the CSS doesn't work when I put it on my phone.
Desktop: http://i.imgur.com/buP6a3s.png
Phone (Androind 5.0 on Galaxy S5): http://i.imgur.com/2tEStCh.png?1
The code for linking the CSS is shown below:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
Can anyone help?
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 am aware that you can add meta tags to an html page to tell ios and android that they are can be installed on the homescreen. For Android/Chrome google tells us to do it like so.
<!doctype html>
<html>
<head>
<title>Awesome app </title>
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="/icon.png">
</head>
<body></body>
</html>
For IOS, it appears you need to just add
<meta name="apple-mobile-web-app-capable" content="yes">
But google has warnings on the same page that says how to do it for android that it will stop supporting this soon.
I already have a desktop only version of a single page web app to support a competition for picking the American Football results in a season. I created this for a community web site that I run and I would like to convert it to run on mobile devices (this is a complete rewrite to break it into smaller individual screens). However the community will have a wide variety of devices - from phones to tablets - and indeed still desktops, and if possible I would like to support all of them with a single page.
I would like that phone and tablet users could either install to the homescreen, or include a toggle fullscreen button if they haven't, desktop users may use the toggle fullscreen button, but it probably doesn't matter as much as they normally have plenty of screen space.
All the guides I have seen give advice peacemeal for each device. Not one that I have seen describes how I might combine all these techniques together for a single app.
Is it possible, and if so how.
This is working for us on iOS 5,6,7,8 and Android 4.0+
<!-- Enable the homescreen app on mobile devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Enable the App Icon -->
<link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
<link rel="apple-touch-icon" href="images/AppIcon.png">
<link rel="apple-touch-startup-image" href="http://ourURL/images/iPhoneStartup.png">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />
I am working on a framework for A mobile site using Jquery Mobile. Has anyone been successful at locking the ability to scale for the android phone? Right now I am using <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />. This works for all phones, but for Android I can scale. Is there anything I can do in Javascript or change the view port settings? Any guidance, demo, or links would be really helpful!
You can use html meta tags to achieve that like
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
see example at http://tab.pagesjaunes.fr