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
responsive view - viennajs 2013-08
Search
Klemens Gordon
August 28, 2013
Technology
0
60
responsive view - viennajs 2013-08
slides from my talk about
http://rv.k94n.com
on the viennajs meetup
Klemens Gordon
August 28, 2013
Tweet
Share
More Decks by Klemens Gordon
See All by Klemens Gordon
Yo Building Progressive Framework-less Vanilla Web-applications
k9ordon
0
150
A loosely coupled front-end
k9ordon
2
600
How to hamburger
k9ordon
0
63
Webpack FTW
k9ordon
1
660
Javascript Event Emitter
k9ordon
0
77
Other Decks in Technology
See All in Technology
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
200
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
150
slog.Handlerのよくある実装ミス
sakiengineer
4
110
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
180
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
560
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
Featured
See All Featured
Building an army of robots
kneath
306
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
It's Worth the Effort
3n
187
28k
Building Applications with DynamoDB
mza
96
6.6k
Site-Speed That Sticks
csswizardry
10
820
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
responsiveview develop & explorer responsive webdesign
frontend developer at karriere.at love vanilla js twitter.com/thisisgordon github.com/k9ordon hi.k94n.com
klemens gordon
current task optimizing the frontend of karriere.at for a lot
of screen sizes
the problem resizing, resizing, resizing.
whats already on the table bookletmarks, extensions, websites, … -http://responsinator.com/?url=k94n.com
-http://lab.maltewassermann.com/viewport- resizer AND a lot of devices (booting, unlocking, browser, typing, wlan …)
the initial plan show a website in different device sizes
like real devices lying on a desk keep it webkit - because I love the dev tools
let's-a go! a very basic solution. [[320,480],[320,500]].forEach(function(s){ var i =
document.createElement('iframe'); i.height = s[1]; i.width = s[0]; i.src = 'http://k94n.com'; document.body.appendChild(i); }); http://jsfiddle.net/k9ordon/UR2WK
what it looks like Browser Window 11” device 1 device
2 device 3
limitations - changing urls - cross domain issues (no iframe
to host connection) - size issues (iframe size is device pixel size) - cpu …
use cases - open tool with a target page loads
in every size - synced actions - change page from a device - scroll a device - focus a device - keydown
the ui device stage Controls: href, device-set, device-scale size device
1 device 2 device 3 device 4
Demos http://rv.k94n.com/#http://www.google.com/nexus/7/ http://rv.k94n.com/#http://mashable.com/ http://rv.k94n.com/#http://getbootstrap.com/examples/jumbotron/ http://rv.k94n.com/#http://thenextweb.com/ http://rv.k94n.com/#http://skinnyties.com/ http://rv.k94n.com/#http://aneventapart.com/
None
device sizing one does not simply put a 15” viewport
into a 11” screen easy, webkitTransform: scale(*) (scale does not resize the box model) device.js#L100
None
the crossdomain issue - keep devices in sync (scroll, location
…) => postMessage() => Weeeeeee chrome extension version! - no problem on initial load good for sharing without extension
communicating across domains 1/5 chrome extensions contentscript injects a waiter
"content_scripts": [{ "matches": ["http://*/*"], "js": ["config.js", "client.js"], "run_at": "document_idle", "all_frames": true }]
communicating across domains 2/5 waiter sends handshake to top window
& listens to messages top.postMessage({method: 'handshake', h: window.innerHeight, w: window.innerWidth, l: window.location.href, o:window.location. origin, r:document.referrer}, rv_host); client.js#L4
communicating across domains 3/5 top runs an instance of _stage,
validates the handshake and sends back a success handshake stage.js#L66
communicating across domains 4/5 waiter recives handshake & boots client
script
communicating across domains 5/5 client has event listeners on iframe
document + posts messages to top client.js#L55
Way to go ... - user agents - more +
custom device sets - rotateable devices - share/explore responsive sites - create sharable screenshots
None