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
300
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
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
最近のVS Codeで気になるニュース 2025/01
74th
1
250
sappoRo.R #12 初心者セッション
kosugitti
0
230
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
ARA Ansible for the teams
kksat
0
150
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
A Philosophy of Restraint
colly
203
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
How to Ace a Technical Interview
jacobian
276
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
BBQ
matthewcrist
86
9.5k
Designing Experiences People Love
moore
139
23k
Music & Morning Musume
bryan
46
6.3k
Facilitating Awesome Meetings
lara
51
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
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!