使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@media print不是“锦上添花”，而是打印功能可用的前提——没它，网页基本没法正常打印；写了但没生效，大概率是选择器权重、加载位置或浏览器预览机制出了问题。
直接说结论：打印排版崩坏，不是因为没写 @media print，而是写了但没管住浮动、没拦住分页、没压住权重、没关掉背景——四件事漏一件，A4纸上就出问题。
为什么 @media print 写了却没生效
浏览器对 @media print 的优先级和屏幕样式一样，它不自动“更高”。你写的 .header { display: none; } 很可能被框架的 .app-header 或第三方 CSS 里更具体的选择器覆盖。
- 别只靠类名匹配：改用
body .header或main .header这类带上下文的选择器，提权比!important更稳 - 检查是否被 CSS-in-JS 动态注入覆盖：React/Vue 项目里，
styled-components或emotion默认不支持print媒体类型，得显式配置insertionPoint或改用<link media="print"> - 别信 DevTools 里的「模拟媒体类型」：它只改渲染颜色和隐藏，不触发真实分页逻辑，很多错要到
Ctrl+P预览里才露出来
怎么防止表格/标题/图片被硬生生切成两页
打印引擎会按纸张尺寸强行折行，但不会主动理解语义。一个 <h2></h2> 和它下面的三段文字被拆开，是常见故障点。
- 给语义块加
page-break-inside: avoid：比如.section, table, img，但注意它对 flex/grid 容器无效，得套一层<div class="keep-together"> <li>标题后别直接跟大段 <code><p></p>：中间插个page-break-after: avoid的空元素更可靠 - 表格必须处理
thead：加thead { display: table-header-group; }，否则表头只在第一页出现 - 避免用
height: 100vh或min-height：打印时视口概念失效，这类值会导致不可预测的空白页 - 横向强制用
@page { size: landscape; }，别用transform: rotate()—— 后者只是视觉旋转，打印输出仍是纵向 - 边距优先用
@page { margin: 1cm; }，而不是靠body padding：后者在某些打印机驱动下会被二次缩放，@page才是真正控制纸张留白的入口 - 字号统一用
pt单位：12pt ≈ 16px，是 A4 纸可读下限；rem在打印时缩放不可控，px在高 DPI 打印机上模糊 - 禁用
background：哪怕设成white，也要写background: transparent !important，否则深色模式用户开启「背景图形」时整页灰黑 - 临时加 debug 边框：
* { outline: 2px dashed #f00 !important; }，预览里看到哪块有红框，哪块就没被display: none覆盖住 - Chrome 打印预览里务必关掉「页眉页脚」、打开「背景图形」，再拖动缩放条看分页线是否合理——这是最接近实打效果的验证方式
- 真机打印一次比调十次预览都管用：不同品牌打印机驱动对
page-break的兼容性差异很大，尤其国产激光机常把break-inside: avoid当摆设 - 别忽略 JS 动态插入的内容：
.modal、.loading、.toast这些没进@media print规则，就会默默占满一页白纸
横向打印、A4边距、字体大小怎么设才不翻车
@page 看似简单，但不同浏览器实现差异大，尤其 Chrome 和 Safari 对 size 和 margin 的解析不一致。
调试时怎么快速定位漏掉的元素或错位布局
靠肉眼扫代码效率低，得用可验证的视觉信号直击问题。
最耗时间的从来不是写规则，而是搞清哪台打印机认哪条 CSS、哪个框架劫持了哪段样式、哪行 !important 把自己绕进去了——留一台连着物理打印机的机器专用于验证，比纯靠眼睛猜快得多。
