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
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Domain-Driven Transformation
hschwentner
2
1.9k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Unity Android XR入門
sakutama_11
0
140
Introduction to kotlinx.rpc
arawn
0
630
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Being A Developer After 40
akosma
89
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Statistics for Hackers
jakevdp
797
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Automating Front-end Workflow
addyosmani
1367
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Faster Mobile Websites
deanohume
306
31k
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!