Is it possible to set different styles when my app is on an IOS or Android device in HTML or CSS?
For example, IOS devices space out <ion-title> differently than Android devices.
In that case you can use something like this.
.ios ion-title {
color: black;
}
.md ion-title {
color: blue;
}
Also you can check it out the official documentation here Ionic Platform Style
The accepted answer did not work for me in Ionic3 however the following did. I am targeting my component GotosComp displayed via ModalController and wanted some margin around it on the mobile running from the web (PWA). Apparently the margin is there automatically when I run in desktop mode browser/responsive.
.platform-mobile {
GotosComp {
margin: 10vmin;
height: 50vh;
width: 80vw;
}
}
Also you can use .platform-core if you wanted to target just the desktop browser
Perhaps it will help someone.
I'm working in a app with Ionic-tabs, and when i run on android device, the tabs are covering the content.
The usually fix is set has-tabs-top on the content div, but ionic has-tabs.pane are overwritten has-tabs-top css
.has-tabs.pane, .bar-footer.has-tabs.pane {
bottom: 49px;
height: auto;
}
.has-tabs-top {
top: 93px;
}
<ion-content padding="true" class="has-tabs-top">
I'm looking a way to fix it without changing the css class
You need to add this in your config method of your app module
$ionicConfigProvider.tabs.position("bottom"); //Places them at the bottom for all OS
$ionicConfigProvider.tabs.style("standard"); //Makes them all look the same across all OS
I'm looking for some code to place on my website, which detects if the user is on a mobile device, opens a pop-up and offers to add an icon on the home screen linking to the website. (Just like adding the website to your favorites and placing an icon on the home screen). Ideally it should work on Android & iPhone. Any help would be much appreciated.
What you can do is create a div somewhere on your page, with the exact text you want. In your CSS, you then make the div display:none and add a media query so when the device is a mobile phone you display the div again.
.mobile-div {
display: none;
}
#media (max-width:767px) {
.mobile-div {
display: block;
}
}
Ofcourse you can expand on this by having a javascript function checking for the screen width, and use functions to open a popup when a certain width is reached (and is thus considered a mobile phone).
<script type="text/javascript">
(function () {
var width = $(window).width();
if (width < 400) {
// do something
}
})();
</script>
You can then search Google for a way of actually making the icon, for example this script might help you: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble. Although I think it is not possible in iOS to do this, you might have to consider creating an app that basically launches your website, or something similar. Ofcourse this will mean you have to pay for your app being displayed in the store, so it comes down to you: Do you really need this functionality, or not?
I have the following setup (view in a narrow window, <750px wide): http://codepen.io/darrylhein/pen/oFalc
The problem is that the hide/show of the navigation doesn't work in Android's default browser. It seems to work pretty much everywhere else. (It does work in Firefox on Android.)
Basically I'm using input:checked ~ .class { height: 16em; } to show the nav.
I've tried removing the transition and a variety of other things and it doesn't seem to work.
Any ideas?
I'd like to avoid using JS, but if I have to I will.
So, 2 parts to the solution:
1) The problem occurs on Android <4.1.2. The solution is to add a fake animation on the body:
body { -webkit-animation: bugfix infinite 1s; }
#-webkit-keyframes bugfix {
from { padding:0; }
to { padding:0; }
}
2) There is also a problem on iOS <6 where labels do not check checkbox. The solution is to add an onclick to the label:
<label for="checkbox" onclick>Menu</label>
I found the solutions here: http://timpietrusky.com/advanced-checkbox-hack
I've also updated the codepen: http://codepen.io/darrylhein/pen/oFalc
I'd like to be able to mimic the behavior of the :active pseudo class on all elements in Android webkit. Currently, the :active syntax only works on a elements (links). Nearly all of the actionable elements in the app I'm working on are something other than a standard link tag. iOS webkit supports :active on all elements.
/* works on both android iOS webkit */
a:active {
color: blue;
}
/* works on iOS webkit, does not work on android webkit */
div:active {
color: red;
}
I've found a couple of resources [1,2] that solve similar problems, but they're both a bit heavy, and I'm wondering if there's a lighter weight solution that I'm just not able to find.
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html
Based on what #caffein said, here's a full implementation of this:
For all :active code, write CSS rules that look like this.
my-button:active, .my-button.fake-active {
background-color: blue;
}
Then in your document ready event add this code:
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(".my-button")
.bind("touchstart", function () {
$(this).addClass("fake-active");
})
.bind("touchend", function() {
$(this).removeClass("fake-active");
});
}
This has the advantage of using the fast native :active class on iOS, and dropping back to JavaScript on Android.
Taken from my blog at http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html
EDIT: I've since discovered that buttons can occasionally 'stick' in the fake-active state. The fix for this is to also handle the touchcancel event. E.g. add this to the above..
.bind("touchcancel",
function() {
var $this = $(this);
$this.removeClass("fake-active");
});
If you don't want to use any script, which adds and removes class for active state of an element, just add empty touchstart event to the body tag:
<body ontouchstart="">
This will tell the android device to handle touch events and pseudo class :active will work correctly on all elements.
No-jQuery version based on Ben Clayton's solution.
EDIT: added "touchmove" event.
function hasClass(ele,cls) {
return ele.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)");
ele.className=ele.className.replace(reg," ");
}
}
window.onload = function() {
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
var elements = document.getElementsByClassName("my-button");
for(var i = 0; i < elements.length; i++) {
var elm = elements[i];
elm.addEventListener("touchstart", function() {
addClass(this, "fake-active");}, false);
elm.addEventListener("touchmove", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchend", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchcancel", function() {
removeClass(this, "fake-active");}, false);
}
}
}
The ":active " pseudo class is triggered when you actually click or press an element.
A workaround for smartphones is to use the Javascript events: "ontouchstart" & "ontouchend".
Try using ontouchstart to modify the style and ontouchend to actually trigger the action.
Since I can't comment, I'm going to add another answer here.
Nadzeya suggested the following solution:
<body ontouchstart="">
This does work as described, but I believe it may also have an unintended consequence.
There has been a problem on our site where buttons would occasionally stop working. In fact, the button would change colors (as if it was pressed) but the click event wouldn't fire. Even submit buttons on forms would fail to submit the form (no Javascript involved), even after appearing pressed.
Today, I saw the problem again. On a whim, I removed this attribute and the problem went away. I then added it again and the problem came back.
Since I can't reproduce the problem reliably, I can't be certain that this was the cause, but for now I'm going to leave the tag off and solve the :active problem another way.
try this. It works for me perfectly on Android
.my-button {
-webkit-tap-highlight-color: blue;
}
Trying add this code to your HTML:
<script>
document.body.addEventlistener('touchstart',function(){},false);
</script>
I got an easy alternate solution. This however requires you to change from div tag to a tag.
<a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a>
.html5logo {
display: block;
width: 128px;
height: 128px;
background: url(/img/html5-badge-128.png) no-repeat;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
-webkit-transform: scale3d(0.9, 0.9, 1);
}
Please find the source at phone gap tutorial
you just need put this code in your document:
<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>