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.0)
Search
Jessica Stokes
August 05, 2015
Technology
0
53
Viewport Trickery (v1.0)
Putting responsive UIs atop desktop-only sites.
Presented at MelbMobile on 05/08/2015
Jessica Stokes
August 05, 2015
Tweet
Share
More Decks by Jessica Stokes
See All by Jessica Stokes
Viewport Trickery (v1.1)
ticky
0
330
Other Decks in Technology
See All in Technology
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
230
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
250
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
140
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
190
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
240
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
130
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
420
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
230
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
250
OCIjp_Oracle AI World_Recap
shinpy
1
150
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
150
Featured
See All Featured
Scaling GitHub
holman
463
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
Fireside Chat
paigeccino
40
3.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Embracing the Ebb and Flow
colly
88
4.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Making Projects Easy
brettharned
120
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to Ace a Technical Interview
jacobian
280
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Transcript
Viewport Trickery or, putting responsive UIs atop desktop-only sites
Jessica Stokes Cybersorceress jessicastokes.net | @ticky
None
Photo by Patrick Lauke (CC-BY-NC-ND; Cropped) https://flic.kr/p/bTt6P8
Bugherd • 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!