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
290
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
51
Other Decks in Programming
See All in Programming
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
2
440
Cursorでアプリケーションの追加開発や保守をどこまでできるか試したら得るものが多かった話
drumnistnakano
0
310
Discord Bot with AI -for English learners-
xin9le
1
120
物流システムにおけるリファクタリングとアーキテクチャの再構築 〜依存関係とモジュール分割の重要性〜
deeprain
1
1.2k
第5回日本眼科AI学会総会_AIコンテスト_3位解法
neilsaw
0
160
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
210
nekko cloudにおけるProxmox VE利用事例
irumaru
3
370
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
770
Criando Commits Incríveis no Git
marcelgsantos
2
160
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
180
HTTP compression in PHP and Symfony apps
dunglas
2
1.6k
Recoilを剥がしている話
kirik
4
6.4k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Being A Developer After 40
akosma
87
590k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Scaling GitHub
holman
458
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.8k
Adopting Sorbet at Scale
ufuk
73
9.1k
Writing Fast Ruby
sferik
628
61k
Why Our Code Smells
bkeepers
PRO
335
57k
How GitHub (no longer) Works
holman
311
140k
Side Projects
sachag
452
42k
The Invisible Side of Design
smashingmag
298
50k
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!