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
Passkeys for Java Developers
ynojima
2
780
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
150
Interface vs Types ~型推論が過多推論~
hirokiomote
1
240
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
700
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
400
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
130
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
870
Perlで痩せる
yuukis
1
670
PT AI без купюр
v0lka
0
210
Using AI Tools Around Software Development
inouehi
0
790
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
500
「兵法」から見る質とスピード
ickx
0
240
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
860
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How GitHub (no longer) Works
holman
314
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
7
640
A designer walks into a library…
pauljervisheath
205
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
GraphQLとの向き合い方2022年版
quramy
46
14k
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!