且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

检测用户是否具有打印功能?

更新时间:2023-11-29 15:47:52

由于大多数用户代理可以打印,并且UA是否可以打印的知识不是必需的网站业务。

许多移动浏览器都可以打印,即使没有连接打印机,也可以打印大多数网页浏览器(打印到pdf,云打印等)。对于任何用户代理而言,在用户不知情的情况下明确声明其打印功能的任何内容都是一个安全问题。这就是印刷样式表的用途(因此网站不必知道它是否被打印)。



你可以做的是隐藏按钮在小屏幕的用户代理上,那些用户仍然可以使用用户代理本身打印他们的文档。您可以检测特定的用户代理并隐藏它们的按钮。



链接

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet :讨论移动样式表和相关问题。



http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile样式表:更多关于移动样式表。



基本的移动样式表附件:

< link rel =stylesheethref =mobile.cssmedia =handheld/>



屏幕大小:

< link rel =stylesheethref =mobile.css
media =only screen and(最大设备宽度:480px)/>


A client has asked for a print button be added to their site and would like it to be hidden for users who don't have the capability to print, e.g. most mobile devices.

Is there any way through JavaScript to detect if a client has printing capabilities?

The requirement is flawed since most user agents can "print" and the knowledge of whether or not a UA can print is not the websites busines.

Many mobile browsers can print and most web browsers can print even if there is no printer attached (print to pdf, cloud print etc). It is a bit of a security problem for any user agent to explicitly state anything about its printing capabilities without the user's knowledge. That is what the printing stylesheet is there for (so the website doesn't have to know if it is being printed at all).

What you can do is hide the button on user agents with small screens, those users can still print their documents using the user agent itself. You could also detect specific user agents and hide the button for them.

Links

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet : discusses mobile stylesheets and related issues.

http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets : more about mobile stylesheets.

Basic mobile stylesheet attachment:

<link rel="stylesheet" href="mobile.css" media="handheld" />

Detecting by screen size:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>