Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>QR Scan Difficulty</title> | |
| <meta name="description" content="The same QR code scans on some phones and fails on others. Measured on the scanners in iPhones and Android phones: how many codes each misses, and why."> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <main class="page"> | |
| <header class="hero"> | |
| <p class="kicker">QR scan difficulty · measured</p> | |
| <h1>Not every phone reads the same QR codes.</h1> | |
| <div class="versus" id="versus" aria-live="polite"></div> | |
| </header> | |
| <section class="block" aria-labelledby="introTitle"> | |
| <h2 id="introTitle">The QR code was invented for messy factories</h2> | |
| <p class="section-lede">In 1994, <a href="https://www.denso.com/global/en/business/innovation/qrcode/" target="_blank" rel="noopener">Denso</a>, a Toyota-group parts maker, made the QR code for its factory floors. A barcode held about 20 characters, so workers scanned about ten for each product. “It was more like a job to read the barcode than to make the product,” <a href="https://www.denso.com/global/en/driven-base/career-life/qr-hara_2408/" target="_blank" rel="noopener">recalls Masahiro Hara</a>, who led the work. And “if the barcodes were contaminated with oil, they would become unreadable.”</p> | |
| <p class="section-lede">So the new code had to “hold up against oil and grime.” It repairs itself: its <a href="https://www.qrcode.com/en/about/error_correction.html" target="_blank" rel="noopener">error correction</a>, the kind used on music CDs, restores the content even when <a href="https://ethw.org/Milestones:QR_(Quick_Response)_Code,_1994" target="_blank" rel="noopener">up to 30% of the code</a> is dirty or damaged. Hara credits the factory on site: “If I had been involved in code development at an IT company, I would not have successfully created the QR Code.”</p> | |
| <p class="section-lede" id="introNote"></p> | |
| <p class="takeaway" id="introClose"></p> | |
| </section> | |
| <section class="block" aria-labelledby="whoTitle"> | |
| <h2 id="whoTitle">More than a billion phones read fewer codes than an iPhone</h2> | |
| <p class="section-lede">On every iPhone, the Camera reads codes with Apple’s scanner. On Android, the Camera and <a href="https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/core/java/com/android/internal/config/sysui/SystemUiDeviceConfigFlags.java" target="_blank" rel="noopener">QR button</a> mostly open the maker’s own scanner, such as <a href="https://www.samsung.com/us/support/answer/ANS10001925/" target="_blank" rel="noopener">Samsung’s</a> or Huawei’s <a href="https://developer.huawei.com/consumer/en/hms/huawei-scankit/" target="_blank" rel="noopener">Scan Kit</a>; on Pixel, the QR button opens Google’s <a href="https://developers.google.com/ml-kit" target="_blank" rel="noopener">ML Kit</a>. Google’s scanner also comes with Google Play services, so apps on most Android phones can use it; WhatsApp and Instagram carry it.</p> | |
| <div class="grid-wrap"><table class="phones who" id="who"></table></div> | |
| <p class="fine" id="whoHow"></p> | |
| <p class="takeaway" id="whoNote"></p> | |
| <p class="fine" id="whoSource"></p> | |
| </section> | |
| <section class="block" aria-labelledby="androidTitle"> | |
| <h2 id="androidTitle">The gap opens on harder codes</h2> | |
| <p class="section-lede">Each row is one set of codes, and each mark one scanner. The band, and the number at the right, span the Android scanners.</p> | |
| <div class="res" id="gridRes"></div> | |
| <div class="skey" id="skey"></div> | |
| <div class="strips" id="strips" role="list" aria-label="Share of codes each scanner read, by set"></div> | |
| <p class="takeaway" id="stripNote"></p> | |
| <p class="fine" id="gridNote"></p> | |
| <div class="grid-wrap" id="numbers" hidden><table class="phones" id="phones"></table></div> | |
| </section> | |
| <section class="block" aria-labelledby="spectrumTitle"> | |
| <h2 id="spectrumTitle">Even everyday prints fail on some scanners</h2> | |
| <p class="section-lede" id="lede"></p> | |
| <div class="spectrum"> | |
| <figure class="bell-figure"> | |
| <div class="key bell-key" id="bellKey"></div> | |
| <svg class="chart" id="bell" role="img" aria-labelledby="spectrumTitle"></svg> | |
| <input type="range" id="cursor" class="range" min="-6" max="106" step="0.5" value="40" aria-label="Move along the difficulty scale"> | |
| <p class="readout" id="readout" aria-live="polite"></p> | |
| <figcaption class="fine" id="bellNote"></figcaption> | |
| </figure> | |
| <aside class="specimen" id="specimen" aria-live="polite"></aside> | |
| </div> | |
| <p class="takeaway" id="takeaway"></p> | |
| <details class="more" id="lanesMore"> | |
| <summary>See each scanner</summary> | |
| <div class="more-body"> | |
| <div class="res" id="laneRes"></div> | |
| <div class="key lanes-key" id="lanesKey"></div> | |
| <svg class="chart" id="lanes" role="img" aria-label="Share of codes each scanner read, by difficulty"></svg> | |
| <p class="fine" id="lanesNote"></p> | |
| </div> | |
| </details> | |
| </section> | |
| <section class="block" aria-labelledby="factorsTitle"> | |
| <h2 id="factorsTitle">What makes a code hard to read</h2> | |
| <p class="section-lede" id="factorsLede"></p> | |
| <div class="pairs" id="pairs"></div> | |
| <details class="more" id="factorsMore"> | |
| <summary>Explore every factor</summary> | |
| <div class="more-body" id="explorer"></div> | |
| </details> | |
| </section> | |
| <section class="block" aria-labelledby="adviceTitle"> | |
| <h2 id="adviceTitle">What helps a code scan on every phone</h2> | |
| <ol class="advice" id="advice"></ol> | |
| </section> | |
| <footer class="block footer"> | |
| <details class="more" id="method"> | |
| <summary>How we measured</summary> | |
| <div class="more-body" id="methodBody"></div> | |
| </details> | |
| </footer> | |
| <div class="tooltip" id="tip" hidden></div> | |
| </main> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> | |