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
330
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
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
Claude Agent SDK を使ってみよう
hyshu
0
660
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
490
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
CSC305 Lecture 04
javiergs
PRO
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
880
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
280
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
CSC305 Lecture 06
javiergs
PRO
0
240
Featured
See All Featured
Navigating Team Friction
lara
190
15k
Visualization
eitanlees
149
16k
Thoughts on Productivity
jonyablonski
70
4.9k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Why Our Code Smells
bkeepers
PRO
340
57k
Facilitating Awesome Meetings
lara
56
6.6k
A Tale of Four Properties
chriscoyier
161
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
How GitHub (no longer) Works
holman
315
140k
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!