window.print for mobile devices - javascript

I am working on a client app, I have a div onclick of which I load a new page and call
window.print()
It works fine in Chrome and Firefox but doesn't work in the mobile devices, any alternative solution to this?

window.print is supported on android with chrome and edge but not firefox .
The command is supported on iOS, Chrome on Windows and Safari and Chrome on Mac. It is not supported on Android.

It works on Android devices. If you can't see proper preview in mobile, set CSS media query for print:
#media print (max-width: 767px) {
/* write css here for mobile responsive for print */
}

Related

add a div overlay on fullscreen video on mobile browser and ie11

I want to add something overlay on fullscreen
as this demo (i found this on internet, not my code)
print ('http://jsfiddle.net/carmijoon/pZbkX/')
It works on desktop chrome, safari but did not work on ie11 and mobile chrome, safari. And browser compatibility of the demo above is the same.
Somebody know how to hack to achieve this goal?

addEventListener useCapture support on mobile

It seems that the useCapture flag has a pretty good support on desktop browsers.
In this page: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener, at the bottom there is a compatibility table, but it's incomplete for mobile.
So my question is: can i use the useCapture flag on those devices: Android, IE Mobile, Opera Mobile, Safari Mobile?
After a little research, I concluded that it should work the same on those mobiles.
Chrome works the same on android: What are differences between Chrome on Android and Desktop Chrome?
Opera browser on android might works the same than the desktop version: http://www.opera.com/blogs/india/2015/05/which-is-the-best-opera-browser-for-android-phones/
For the main part, safari mobile might work the same as safari desktop: Desktop Safari ( Mac & Windows ) VS Mobile Safari (iPhone) - HTML, CSS, JS support
Ie mobile should work like ie11 desktop: https://en.wikipedia.org/wiki/Internet_Explorer_Mobile

How can I inspect element in a UC Browser in Android Phone on my machine?

When I use UC Browser for desktop my mobile view working fine.
But when I use UC Browser Mobile App and open my site .. It breaks and take more them for loading.
I just want to inspect remotely UC Browser Mobile app FORCSS/HTML javascript Example we did in Chrome :
As we did in Chrome https://developer.chrome.com/devtools/docs/remote-debugging
Recently we release uc-devtools,a standalone tools to debug the latest developer version of UC Browser.
Check this out:
https://plus.ucweb.com/docs/pwa/docs-zh/xy3whu?locale=en-US
https://plus.ucweb.com is the all in one international supporting site for developer.
As of now you wont be able to connect and debug UC mobile browser on UC browser Desktop directly as like of chrome.
If you are working on any UI issue related UC browser in mobile. You can replicate it on IE emulator[Desktop].
Setting required:
Document Mode: IE10
width 320 or 360.
Orientation : portrait
It will replicate more or less same bugs like UC browser mobile.

Using window.print() or alternative on Android devices

On Android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3), the window.print() command in JavaScript doesn't do anything. As far as I can tell it doesn't even register an error.
I know for a fact that most if not all of these browsers can print because you can use mobile Chrome's menu to choose "print".
Why doesn't window.print() trigger the behavior you would expect (opening the clients print menu)? And is there an Android alternative to window.print()?
It is clearly stated in this Documentation, "The command is supported on iOS, Chrome on Windows and Safari and Chrome on Mac. It is not supported on Android."
Android phones don't have native support for printing yet, so window.print() will not work. Which means you need to use third-party app to do the printing. You could find some alternatives in this article.
I'm working on a simular problem and came up with this solution:
$(document).ready(function($) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
$('button.print').click(function(e) {
e.preventDefault();
if (isAndroid) {
// https://developers.google.com/cloud-print/docs/gadget
var gadget = new cloudprint.Gadget();
gadget.setPrintDocument("url", $('title').html(), window.location.href, "utf-8");
gadget.openPrintDialog();
} else {
window.print();
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="print">Print this page</button>
I haven't had the time to check if this works, i don't have an android device with me at the moment. I Would love to have some feedback on this ;-)
⚠️ [Deprecated] : Google Cloud Print will no longer be supported as of December 31, 2020. Please see the support article for help migrating.
Use Google Cloud Print (GCP) - there is no app required. The user must have set up a printer via GCP though.
This example uses GCP gadget
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print</title>
</head>
<body>
<div>
<p>On android devices (I have tested Nexus 5, Nexus 10, Galaxy S4 and Galaxy Tab 3) the window.print() command in javascript doesn't do anything, as far as I can tell it doesn't even register an error.</p>
<p>I know for a fact that most if not all of these browsers can print because you can use mobile chromes menu to choose "print". My questions is, why doesn't window.print() trigger the behavior you would expect (opening the clients print menu).
And is there an android alternative to window.print()?</p>
</div>
<div id="gcpPrint"></div>
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(cloudprint.Gadget.createDefaultPrintButton("gcpPrint"));
gadget.setPrintDocument("text/html", "Print", document.documentElement.innerHTML);
</script>
</body>
</html>
I think, direct print() method is disabled on devices by default. I not saw so many phones or other Android devices with printer, however by USB it should be possible of course.
Instead, recommended is saving content/page as pdf and print it via some cloud print service.
At this moment, window.print() functionality works perfectly on my Android 5.0.1 device with both, Chrome and the default browser.
Now, window.print() is working on Android devices.
Download adobe acrobat in your phone and you can use windows.print() in mobile.

Desktop Safari ( Mac & Windows ) VS Mobile Safari (iPhone) - HTML, CSS, JS support

Is support of HTML, CSS and Javascript same in Desktop Safari ( Mac & Windows ) and Mobile Safari (iPhone)?
If I'm making some thing for iPhone Safari and use Desktop version Safari on my Windows 7 PC to test and debugging, after fininsh will it look same on both? Are there any difference between Safari ( Desktop ) and Safari (iphone) in terms of support of HTML, CSS and Javascript?
They are based on the same html render engine - WebKit. Pure HTML, CSS and Javascript are supported in mobile safari and desktop version. But if you are doing sth in Flash or Applet, mobile safari does not support that. Some HTML5 tags are not fully supported, like File/FileSystem interface. You still need to test the pages in mobile safari, although developing them in desktop version safari in first place is a good way.

Categories

Resources