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
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
290
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
GraphRAGの仕組みまるわかり
tosuri13
8
530
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
童醫院敏捷轉型的實踐經驗
cclai999
0
210
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
410
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ふつうの技術スタックでアート作品を作ってみる
akira888
0
450
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Visualization
eitanlees
146
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
A Tale of Four Properties
chriscoyier
160
23k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building an army of robots
kneath
306
45k
Unsuck your backbone
ammeep
671
58k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
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!