Develop Reference

media query does not work correctly for mobile device - phone

I've looked at similar questions on here and tried what they've shown, where people have resolved issues, but no luck for me.
I've got a basic bootstrap 4.4.1 CSS file hooked in and then my own custom CSS file as well.
At the bottom of it, I plug in the media queries:
#media screen and (min-width:176px) and (max-width: 459px) {
divboxshadow_rt {
width: 320%;
float:left;
background-color: #FFFCCC;
}
body {
width: 100%;
background-color: #fff;
}
.col col-md-8 px-md-6 {
width:80%; float:left
}
}
#media (min-width:460px) and (max-width: 767px) {
.col-sm-3.col-xs-12{ width:50%; float:left}
.col-sm-4.col-xs-12{ width:50%; float:left}
.col-sm-6.col-xs-12{ width:50%; float:left}
}
This actually works in the dev console looking at it in one of my browsers in responsive mode, particularly one of the iPhone flavors. I have no intention of using this paltry bkg color but it does show as I alter it.
I've tried my site in both the stock browser and Chrome. I've got Android, Galaxy Samsung 9.
Is there some code override I need to use to get this to work? Or does something here look incorrect, despite the fact it's now looking correct in two dev consoles (Chrome and Avast)?
I need the col widths or the body width actually, to be a little wider in phone mode. The div box is getting scrunched up wrongly.
I welcome any feedback you folks will give me. I added another class and revised my question below, slightly. I cannot get that one class to override its original. Am I doing that incorrectly? i.e. override divboxshadow_rt with the media query version? Actually very close now.
I have
<div class="col col-3 .px-md-6 divboxshadow_rt " >
I am attempting/needing to override the col col-3 with col col-md-8 as plugged into the media query for small devices above. Would it not override that? the col col-3 stays in tact, and isn't affected in my responsive testing. Perhaps I'm not approaching it correctly, but I thought the media query above would override the setting. No? Again, any feedback is welcomed.

// No media query necessary for xs breakpoint as it's effectively #media (min-width: 0) { ... }
You only need to write col-12 instead col-xs-12
#include media-breakpoint-up(sm) { ... }
#include media-breakpoint-up(md) { ... }
#include media-breakpoint-up(lg) { ... }
#include media-breakpoint-up(xl) { ... }
you only override the width and float styles in your custom css

CSS Calc works in Chrome but not in Phonegap app on Android 4.4.2

I use the following rule
.topbtns
{
position:absolute;
bottom:95vh;
right:0;
left:0;
top:calc(95vh - 21vw - 1.2em);
text-align:center;
}
which is used to position a pair of buttons bottom-center of the screen
<div class='topbtns'>
<div class='tear t-tosponsor'><div>View Storefront</div></div>
<div class='tear t-continue' id='btnContinue'><div>Continue</div></div>
</div>
This works perfectly in my Chrome browser on Windows - even with device emulation turned on. $('.topbtns')[0].getBoundingClientRect() returns
{top: 538.2374877929688, right: 375.20001220703125, bottom:
538.2374877929688, left: 0, width: 375.20001220703125…}
However, when I use the same HTML & CSS and build it into my Android Phonegap app .topbtns is nowhere in sight. The same getBoundingClientRect code returns
{height:111,width:360,left:0,right:360,bottom:-497.875,top:-60}
I thought this might be because
The Android Webview does not understand vh units. However, I modified the rule to use `bottom:95vh;top:75vh} which worked perfectly.
I also replaced calc with -webkit-calc but to no avail.
It is as though calc and its -webkit-calc cousin does not understand vh whilst the webview itself does.
I would be obliged to anyone who might be able to express what is going on here.
Whilst writing this I have come across this - http://slides.com/html5test/the-android-browser#/. However, it is not clear to me that the WebView used by Phonegap is the one being discussed here.

I believe this could help you, the calc feature is not supported in some versions of Android (<= 4.4.4), so the problem is not Phonegap / Cordova, is the Device where you test that probably does not supported it

How to allow copy and paste from an ionic webview?

I am using ionic and cordova to build a hybrid application.
However, I can't copy text from any of my webviews. From my Android phone or from the browser, copying text does not work. Selecting text and dragging the pointer does nothing.
This occurs for instance with the basic app generated by ionic start myApp tabs.
Simply put, how can I allow users to copy-paste?

Make ion-content to overflow-scroll="true" and add a class to your copyable text
.selectable{
-webkit-user-select: auto;
}
You cannot copy anything to clipboard from javascript for now programmatically. However it can be done from native side via plugin CordovaClipboard

.selectext
{
-webkit-user-select: auto;
}
<div class="selectext">
Select text
</div>

You can try with console.log() and copy/paste from the console.
Or if you need to copy from an emulator you can use Remote debugging

Using checkbox to show nav (content) doesn't work on Android

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

Jquery Mobile on android link transition double blink

Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)

Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.

Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>