Printing Document From Android Browser

Question

Hello everyone. I hope somesone can point me to a right direction on how to solve the issue that I am facing now.   I have an asp.net webforms application using C#. One of its function is to print a document. I was able to do that in a web browser and it shows my in-line css. However, our clients wanted to print this document also using their mobile devices. The problem is, the css doesn't show on the mobile browser. Below is what it looks like when printing from a mobile device.       Below is the output when printing from a web browser;     All the style that I used is inline css. Thanks in advance.

Jes Sie · Answer

Thanks Dipa. I will keep it in mind.

Dipa Mehta · Answer

This viewport functionality might be helpful to you. If possible then apply it. Hopefully you will get the positive results regarding your mobile application. Just have a little glance on it.
Styling mobile pages for mobile browsers:
It's beyond the scope of this document to describe in great detail what kinds of HTML markup work correctly or which web design techniques maximize usability on particular devices. It's up to you to find a sufficiently simple layout, optimized for a mobile-sized screen, without using unreliable HTML or CSS positioning tricks. One important technique worth mentioning, however, is the viewport meta tag.
Certain modern mobile browsers, in an effort display web pages meant for desktop monitors, render the page on a virtual canvas, also called "viewport" (e.g., the virtual viewport is 980 pixels wide on iPhone, and 850 pixels wide on Opera Mobile by default) and then scale the result down to fit onto the screen's physical pixels. The user can then zoom in and pan around that viewport. This has the advantage that it lets the browser display the page in its intended layout, but it's also has the disadvantage that it forces zooming and panning, which is inconvenient for the user. If you're designing for mobile, it's better to design for a narrow screen so that no zooming or horizontal scrolling is necessary.
A way to tell the mobile browser how wide the viewport should be is through the nonstandard viewport meta tag.
For example, if you add the following to your page's HEAD section,
HTML
… then supporting smartphone browsers will lay out the page on a 480-pixel wide virtual canvas. This means that if your HTML elements define their widths in percentage terms, the percentages will be interpreted with respect to this 480-pixel width, not the default viewport width. As a result, the user is less likely to have to zoom and pan horizontally – considerably improving the mobile browsing experience.
If you want the viewport width to match the device's physical pixels, you can specify the following:
HTML
For this to work correctly, you must not explicitly force elements to exceed that width (e.g., using a width attribute or CSS property), otherwise the browser will be forced to use a larger viewport regardless.
Most modern smartphones support dual orientation: they can be held in either portrait or landscape mode. So, it's important not to make assumptions about the screen width in pixels. Don't even assume that the screen width is fixed, because the user can re-orient their device while they are on your page.
Older Windows Mobile and Blackberry devices may also accept the following meta tags in the page header to inform them content has been optimized for mobile and therefore should not be transformed.
HTML