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.1)
Search
Jessica Stokes
September 09, 2015
Programming
0
320
Viewport Trickery (v1.1)
Putting responsive UIs atop desktop-only sites.
Presented at MelbJS on 09/09/2015
Jessica Stokes
September 09, 2015
Tweet
Share
More Decks by Jessica Stokes
See All by Jessica Stokes
Viewport Trickery (v1.0)
ticky
0
53
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
350
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
Porting a visionOS App to Android XR
akkeylab
0
680
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Six Lessons from altMBA
skipperchong
28
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Embracing the Ebb and Flow
colly
86
4.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Making Projects Easy
brettharned
116
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
Viewport Trickery or, putting responsive UIs atop desktop-only sites v1.1
Jessica Stokes Cybersorceress jessicastokes.net | @ticky
None
Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
Bugherd • Point-and-click bug tracker • Lives inside other peoples’
websites • 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!