如何为现在在带有触摸屏的 Kiosk 中使用的现有 Web 应用程序创建 CSS答案

【问题标题】：How to create CSS for an existing web application that now is used in a Kiosk with touch screen如何为现在在带有触摸屏的 Kiosk 中使用的现有 Web 应用程序创建 CSS
【发布时间】：2013-03-18 17:24:15
【问题描述】：

我必须调整现有的 Web 应用程序以在仅提供触摸屏的信息亭中使用。该应用程序基于 php-jquery，我必须将一些 html 元素（由 php 创建）和 CSS 用于触摸屏界面。

我该怎么做？在 CSS 中是否有针对触摸屏的特定指令？（我不是在谈论移动屏幕，信息亭将具有正常分辨率）。有没有办法让 php 知道用户正在使用触摸屏（以便我可以相应地更改 html）？

最后但同样重要的是，是否有任何用于开发触摸屏界面的综合最佳实践/指南？

提前谢谢，希望这不是另一个问题的重复

【问题讨论】：

我认为你不应该调整你的代码。让触摸屏调整结果！
我只需要调整一下屏幕的html布局。也许应该从 php 中去掉那部分
也许这个链接可以帮助你：alastairc.ac/2010/03/detecting-touch-based-browsing
Kiosk 系统使用哪种浏览器？
我想我们可以选择浏览器。你有什么要推荐的吗？

标签： php jquery css user-interface touch

【解决方案1】：

css spec 中没有为信息亭类型设备定义媒体类型。最接近的可能是电视，但信息亭浏览器可能会加载屏幕类型。

您能否检测信息亭正在使用的浏览器并返回不同的样式表？

【讨论】：

这是我的第一个想法，但我认为这并不是最好的......如果家庭用户使用相同的浏览器怎么办？任何方式谢谢链接！
这很讨厌，但您可以通过检查 screen.width x screen.height == screen.availWidth x screen.availHeight 来检查浏览器是否正在全屏运行

【解决方案2】：

这取决于您在 Kiosk 上运行的浏览器...例如，如果您正在运行 Opera，它们会将全屏视为不同的 CSS 媒体类型。他们称之为Opera Show，您可以轻松控制它：

@媒体投影{ /* 这些规则只适用于全屏模式 */ }

由于信息亭通常以全屏模式运行，这对您有用。

【讨论】：