Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Viewport Trickery (v1.0)
Search
Jessica Stokes
August 05, 2015
Technology
0
53
Viewport Trickery (v1.0)
Putting responsive UIs atop desktop-only sites.
Presented at MelbMobile on 05/08/2015
Jessica Stokes
August 05, 2015
Tweet
Share
More Decks by Jessica Stokes
See All by Jessica Stokes
Viewport Trickery (v1.1)
ticky
0
330
Other Decks in Technology
See All in Technology
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
940
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
160
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
140
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
270
Azure Well-Architected Framework入門
tomokusaba
1
350
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Wasmのエコシステムを使った ツール作成方法
askua
0
120
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Scaling GitHub
holman
463
140k
Side Projects
sachag
455
43k
Statistics for Hackers
jakevdp
799
220k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to Ace a Technical Interview
jacobian
280
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
GitHub's CSS Performance
jonrohan
1032
470k
Typedesign – Prime Four
hannesfritz
42
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Speed Design
sergeychernyshev
32
1.2k
Practical Orchestrator
shlominoach
190
11k
Transcript
Viewport Trickery or, putting responsive UIs atop desktop-only sites
Jessica Stokes Cybersorceress jessicastokes.net | @ticky
None
Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
Bugherd • Needs to work on desktop and mobile sites
• Responsive or not • On any device • Mobile browsers are liars • …for kinda reasonable reasons • position: fixed; // more-or-less useless on mobile
BugHerd Classic • Sidebar-based • Never handled mobile devices
None
New Bugherd • Simple layer over Stack, our task management
product • Just buttons and an issue report UI • Mobile-compatible, day 1
None
Solution? • Detect real zoom level and viewport position •
Scale and position the whole UI to suit
Viewporter • Tools for working with all sorts of browser
viewports • getScaleFactor getMobileScaleFactor for zoom detection • getViewportCoordinates for viewport location • Demo at https://macropodhq.github.io/viewporter https://github.com/macropodhq/viewporter | https://git.io/vOlJ9
PostCSS px to em • Makes your UI scalable •
Pixel measurements become ems • Base font size, 16px by default • Designers developers work in pixels for precision https://github.com/macropodhq/postcss-px-to-em | https://git.io/vOlUr
Jessica Stokes Cybersorceress jessicastokes.net | @ticky • Viewporter is available
at https://git.io/vOlJ9 • PostCSS px to em is available at https://git.io/vOlUr • Go make something cool with them!