Duo Lab gives a website an explicitly sized iframe viewport. Fold, unfold, and rotate to
test how width, height, and CSS orientation media queries affect its layout. The unfolded
display uses one continuous iframe, not two independent pages.
Start here
The compact top bar keeps the website URL, Open, Reload, Settings, and appearance toggle
visible. The More (…) menu contains Bookklik demo, Open in new tab, and Help &
shortcuts. Tab through these actions; Escape closes the menu and returns focus to its
button.
Use the sun/moon button in the top toolbar to switch between Dark and Light. Appearance in
Settings also offers Automatic, which follows your operating system. Your selection is
saved locally when storage is available. Appearance changes only the simulator interface;
the test page retains its own CSS and host-OS color-scheme preference, independent of the
simulator theme. It is not test-site dark-mode emulation.
The Preview toolbar includes a device picker, portrait/landscape buttons, and Fold/Unfold.
These are the only device, orientation, and fold controls. Settings contains advanced
viewport, scale, and appearance options. Controls briefly lock during the fold transition
to preserve the hinge geometry.
Use the Settings button in the top toolbar (or S) to hide or show the settings panel
without reloading the website. Settings always starts collapsed on every screen size,
including when a previous version saved an open panel. You can open it for the current
session; other preferences are still saved. The preview expands to use the available
space; its CSS viewport dimensions do not change. Reset workspace closes Settings again.
Enter an HTTP or HTTPS URL and select Open. Use a site you own that permits framing.
Bookklik demo in the More menu loads https://bookklik.com/, which is also the default
website when the simulator opens. It is a live website and requires an internet
connection. Folding and rotating resize the existing frame without intentionally reloading
it; scroll preservation depends on the website.
Blank, refused, or endlessly loading?
-
Sites can prohibit embedding with
X-Frame-Options or CSP
frame-ancestors. This file cannot bypass those protections.
-
A frame load event is not proof that content rendered. Cross-origin restrictions prevent
reliable inspection of another site's page, current URL, scroll position, overflow, or
errors.
-
Open in new tab checks whether the requested URL loads normally. A site working in its
own tab may still block embedding.
-
For your own site, allow framing in its development configuration or use your browser's
responsive developer tools. Do not disable browser security.
-
HTTP sites may be blocked inside an HTTPS-hosted preview. A downloaded file behaves
differently depending on browser security policy. Local servers must already be running;
this file does not start them.
-
Login, third-party cookies, permissions, popups, and some downloads may behave
differently in a sandboxed iframe. Navigation of the simulator's own window is
deliberately blocked.
What is—and isn't—simulated
The width and height controls set CSS pixels. Fit and zoom scale the
whole device visually without changing those layout dimensions. Portrait and landscape
swap the iframe dimensions. The host browser still controls rendering, user agent, actual
device pixel ratio, touch input, screen.orientation, and device APIs. This is
not Safari/WebKit, Samsung Internet, Android, or iOS emulation.
The crease and edge-inset guide are non-interactive visual overlays. They do not create
viewport segments or set env(safe-area-inset-*). The screen uses its full
rectangular viewport; rounded corners visually clip the edges. Browser bars and system
status/navigation areas are not subtracted. Validate production work on a real device.
Device presets & provenance
Choose Apple iPhone Duo or Samsung Galaxy Z Fold8 in Device configuration. Switching
devices keeps the requested website and orientation, then applies that device's viewport
preset. Folding preserves the physical hinge direction: an inner landscape view folds to a
portrait cover, while an inner portrait view folds to a landscape cover. The product fold
animation moves the left leaf over the fixed right leaf, with the cover screen on the
reverse of the moving leaf (top over bottom after clockwise rotation). Its reflective 3D
shell briefly covers the page; it does not emulate foldable screen APIs. Turn it off under
Visual guides for instant switching. System reduced-motion preferences always bypass it.
Custom dimensions are reset on device changes.
| Device / display |
Hardware pixels |
Estimated CSS viewport |
| iPhone Duo inner, landscape |
2670 × 1878 |
890 × 626 |
| iPhone Duo outer, portrait |
1398 × 2034 |
466 × 678 |
| Galaxy Z Fold8 main, landscape |
2448 × 1848 |
816 × 616 |
| Galaxy Z Fold8 cover, portrait |
1248 × 1972 |
416 × 657 |
Hardware resolutions and diagonal sizes come from
Apple's iPhone Duo specifications
and
Samsung's Galaxy Z Fold8 specifications. Fold8 uses a 7.6-inch main and 5.5-inch cover display. Resolutions above are arranged
for the stated orientation.
CSS sizes divide hardware pixels by an assumed 3× scale, rounding to
whole CSS pixels where needed. These are not verified Safari, Chrome, or Samsung Internet
viewport sizes. Android display settings, browser bars and OS configuration can change
real browser dimensions. The 3× assumption does not change your host browser's actual
pixel ratio. Edit sizes from 240 to 2400 CSS pixels to match your measured device.
Graphite and titanium-like device frames are illustrative.
Icon credits
UI icons are SVG assets from
SenangStart Icons, @bookklik/senangstart-icons v1.0.16. Only the required SVGs are embedded, so the
simulator does not need an icon CDN or external script.
SenangStart Icons · MIT license
MIT License
Copyright (c) 2025 Bookklik Technologies
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Typography
The simulator loads Outfit weights 100–900 from the Google Fonts CDN, with display=swap
and system-font fallbacks if the font is unavailable. No font file is embedded in this
HTML. The loaded website retains its own typography.
Outfit · SIL Open Font License 1.1
Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Shortcuts & privacy
S show/hide settings · R rotate ·
F fold/unfold · 0 fit ·
? help. Shortcuts work when focus is outside the embedded website
and form fields.
The simulator itself has no analytics, remote JavaScript libraries, proxy, or backend.
Outfit font loading contacts fonts.googleapis.com and fonts.gstatic.com. The live Bookklik
demo requires internet and loads its own website assets. Any remote URL contacts that
website directly. Only workspace preferences are stored locally when your browser allows
it; URLs are not saved. Reset workspace clears saved preferences and returns to the demo.