{"id":3051,"date":"2026-09-26T02:28:37","date_gmt":"2026-09-26T00:28:37","guid":{"rendered":"https:\/\/vasilidesign.com\/?page_id=3051"},"modified":"2026-09-26T03:04:27","modified_gmt":"2026-09-26T01:04:27","slug":"iphone-duo-test","status":"publish","type":"page","link":"https:\/\/vasilidesign.com\/en\/iphone-duo-test\/","title":{"rendered":"How does your website look on the iPhone Duo?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3051\" class=\"elementor elementor-3051\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a410c9b e-flex e-con-boxed e-con e-parent\" data-id=\"a410c9b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38dc491 elementor-widget__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading\" data-id=\"38dc491\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Wie sieht deine Website auf dem iPhone Duo aus?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e13e09 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"6e13e09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Gib deine URL ein und teste deine Website auf beiden Displays des iPhone Duo. Das Tool ist kostenlos, braucht keine Anmeldung und l\u00e4uft direkt im Browser.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11f447b elementor-widget elementor-widget-html\" data-id=\"11f447b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- iPhone Duo Tester \u00b7 VASI Design -->\n<style>\n#duo-tester{\n  --dt-bg:transparent; --dt-surface:#F7F7F8; --dt-ink:#141518; --dt-muted:#62656C; --dt-line:#D5D7DB;\n  --dt-ti:#8C7F6D; --dt-frame-a:#C9C4BC; --dt-frame-b:#8E877D; --dt-crease:rgba(0,0,0,.07);\n  --dt-sans:\"Cabinet Grotesk\", \"CabinetGrotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --dt-mono:var(--dt-sans);\n  background:var(--dt-bg); color:var(--dt-ink); font:15px\/1.6 var(--dt-sans);\n  width:100%; max-width:1180px; margin-inline:auto; -webkit-font-smoothing:antialiased;\n}\n#duo-tester *,#duo-tester *::before,#duo-tester *::after{box-sizing:border-box}\n\/* Cabinet Grotesk \u00fcberall erzwingen, auch gegen Theme- und Elementor-Stile f\u00fcr Buttons, Inputs und Texte *\/\n#duo-tester,#duo-tester *,#duo-tester input,#duo-tester button,#duo-tester p,#duo-tester span,#duo-tester div,#duo-tester b{font-family:\"Cabinet Grotesk\",\"CabinetGrotesk\",system-ui,-apple-system,\"Segoe UI\",sans-serif!important}\n#duo-tester .dt-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}\n#duo-tester [hidden]{display:none!important}\n\n\/* Eingabe + Einstellungen *\/\n#duo-tester .dt-controls{display:flex; flex-direction:column; gap:16px; align-items:stretch}\n#duo-tester .dt-url{display:flex; width:100%; min-width:0; margin:0; background:var(--dt-surface); border:1px solid var(--dt-line); border-radius:999px; padding:6px 6px 6px 28px; align-items:center; box-shadow:0 10px 30px -18px rgba(20,18,15,.25)}\n#duo-tester .dt-url:focus-within{border-color:var(--dt-ti)}\n#duo-tester .dt-url input{flex:1; min-width:0; border:0; background:transparent; color:var(--dt-ink); font:clamp(16px,2vw,20px) var(--dt-mono); padding:14px 0; margin:0; outline:none; box-shadow:none; height:auto}\n#duo-tester .dt-privacy{margin:-6px auto 0; max-width:60ch; padding-inline:16px; font-size:11.5px; line-height:1.5; color:var(--dt-muted); text-align:center}\n#duo-tester .dt-settings{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:8px}\n#duo-tester button{font-family:var(--dt-sans); cursor:pointer; line-height:1.2; text-transform:none; letter-spacing:normal; box-shadow:none; margin:0}\n#duo-tester .dt-go{border:0; background:var(--dt-ink); color:#fff; border-radius:999px; padding:16px 32px; font-size:15px; font-weight:600}\n#duo-tester .dt-go:hover{opacity:.88; background:var(--dt-ink); color:#fff}\n#duo-tester .dt-seg{display:inline-flex; background:var(--dt-surface); border:1px solid var(--dt-line); border-radius:999px; padding:3px}\n#duo-tester .dt-seg button{border:0; background:transparent; color:var(--dt-muted); padding:8px 16px; border-radius:999px; font-size:13px; font-weight:500}\n#duo-tester .dt-seg button[aria-pressed=\"true\"]{background:var(--dt-ink); color:#fff}\n#duo-tester .dt-rot{border:1px solid var(--dt-line); background:var(--dt-surface); color:var(--dt-ink); border-radius:999px; padding:8px 14px; font-size:13px}\n#duo-tester .dt-rot:disabled{opacity:.35; cursor:default}\n#duo-tester button:focus-visible{outline:2px solid var(--dt-ti); outline-offset:2px}\n@media (max-width:480px){\n  #duo-tester .dt-url{padding-left:18px}\n  #duo-tester .dt-privacy{padding-inline:18px}\n  #duo-tester .dt-go{padding:14px 20px}\n}\n\n\/* Ger\u00e4t *\/\n#duo-tester .dt-stage{display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:44px 24px; min-height:520px}\n#duo-tester .dt-holder{position:relative; transition:width .6s cubic-bezier(.6,0,.2,1), height .6s cubic-bezier(.6,0,.2,1)}\n#duo-tester .dt-device{\n  --dt-s:1;\n  position:absolute; top:0; left:0; transform-origin:0 0; padding:14px; border-radius:52px;\n  background:linear-gradient(145deg,var(--dt-frame-a),var(--dt-frame-b));\n  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 40px 80px -30px rgba(20,18,15,.45), 0 12px 24px -12px rgba(20,18,15,.3);\n  transition:padding .6s, border-radius .6s;\n}\n#duo-tester .dt-screen{position:relative; overflow:hidden; background:#fff; border-radius:40px; transition:width .6s cubic-bezier(.6,0,.2,1), height .6s cubic-bezier(.6,0,.2,1)}\n#duo-tester .dt-screen iframe{position:absolute; inset:0; width:100%; height:100%; max-width:none; border:0; margin:0; background:#fff}\n#duo-tester .dt-cam{position:absolute; z-index:5; width:11px; height:11px; border-radius:50%; background:#0b0b0c; top:12px; left:50%; transform:translateX(-50%); transition:opacity .3s; pointer-events:none}\n#duo-tester .dt-crease{position:absolute; z-index:5; pointer-events:none; opacity:0; transition:opacity .5s .3s}\n#duo-tester .dt-device.open .dt-crease{opacity:1}\n#duo-tester .dt-device.open .dt-cam{opacity:0}\n#duo-tester .dt-device.open.land .dt-crease{top:0; bottom:0; left:50%; width:18px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--dt-crease),transparent)}\n#duo-tester .dt-device.open.port .dt-crease{left:0; right:0; top:50%; height:18px; transform:translateY(-50%); background:linear-gradient(180deg,transparent,var(--dt-crease),transparent)}\n\n\/* Schutzschicht: Seite scrollt sofort, Vorschau erst nach Klick bedienbar *\/\n#duo-tester .dt-shield{position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center; padding:0 0 calc(24px \/ var(--dt-s)); border:0; background:transparent; cursor:pointer}\n#duo-tester .dt-shield span{font-family:var(--dt-sans); font-size:calc(13px \/ var(--dt-s)); font-weight:500; color:#fff; background:rgba(20,21,24,.78); border-radius:999px; padding:calc(8px \/ var(--dt-s)) calc(16px \/ var(--dt-s)); opacity:0; transition:opacity .25s}\n#duo-tester .dt-shield:hover span,#duo-tester .dt-shield:focus-visible span{opacity:1}\n@media (hover:none){ #duo-tester .dt-shield span{opacity:1} }\n#duo-tester .dt-device.active .dt-shield{display:none}\n#duo-tester .dt-empty:not([hidden]) ~ .dt-shield{display:none}\n\n\/* Leerer Zustand bei geteilten Links *\/\n#duo-tester .dt-empty{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; text-align:center; padding:calc(32px \/ var(--dt-s)); background:var(--dt-surface); color:var(--dt-muted); font-size:calc(15px \/ var(--dt-s)); line-height:1.5}\n\n#duo-tester .dt-spec{margin-top:26px; font:12px var(--dt-mono); color:var(--dt-muted); letter-spacing:.04em; font-variant-numeric:tabular-nums; text-align:center}\n#duo-tester .dt-spec b{color:var(--dt-ink); font-weight:400}\n#duo-tester .dt-hint{margin:10px 0 0; font-size:12.5px; color:var(--dt-muted); text-align:center; max-width:56ch}\n\n@media (max-width:760px){ #duo-tester .dt-stage{min-height:420px; padding-block:28px 12px} }\n@media (prefers-reduced-motion:reduce){ #duo-tester *{transition:none!important} }\n<\/style>\n\n<div id=\"duo-tester\">\n  <div class=\"dt-controls\">\n    <form class=\"dt-url\" id=\"dtForm\" autocomplete=\"off\">\n      <label for=\"dtInput\" class=\"dt-sr\">Website-Adresse<\/label>\n      <input id=\"dtInput\" type=\"text\" inputmode=\"url\" spellcheck=\"false\" placeholder=\"deine-website.de\" value=\"\">\n      <button class=\"dt-go\" type=\"submit\">Testen<\/button>\n    <\/form>\n    <p class=\"dt-privacy\">Beim Testen l\u00e4dt dein Browser die eingegebene Website direkt von deren Server. Dabei gelten die Datenschutzbestimmungen dieser Website.<\/p>\n    <div class=\"dt-settings\">\n      <div class=\"dt-seg\" role=\"group\" aria-label=\"Display w\u00e4hlen\">\n        <button type=\"button\" id=\"dtClosed\" aria-pressed=\"true\">Zugeklappt<\/button>\n        <button type=\"button\" id=\"dtOpen\" aria-pressed=\"false\">Aufgeklappt<\/button>\n      <\/div>\n      <button type=\"button\" class=\"dt-rot\" id=\"dtRotate\" disabled title=\"Innendisplay drehen\">\u21bb Drehen<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"dt-stage\" id=\"dtStage\">\n    <div class=\"dt-holder\" id=\"dtHolder\">\n      <div class=\"dt-device\" id=\"dtDevice\">\n        <div class=\"dt-screen\" id=\"dtScreen\">\n          <span class=\"dt-cam\" aria-hidden=\"true\"><\/span>\n          <span class=\"dt-crease\" aria-hidden=\"true\"><\/span>\n          <iframe id=\"dtFrame\" title=\"Website-Vorschau im iPhone Duo\" referrerpolicy=\"no-referrer\"\n            sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"><\/iframe>\n          <div class=\"dt-empty\" id=\"dtEmpty\">Gib oben die Adresse einer Website ein und klicke auf \u201eTesten\u201c.<\/div>\n          <button type=\"button\" class=\"dt-shield\" id=\"dtShield\" aria-label=\"Vorschau bedienen\"><span>Klicken zum Bedienen<\/span><\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"dt-spec\" id=\"dtSpec\"><\/div>\n    <p class=\"dt-hint\">Bleibt die Vorschau leer? Manche Websites verbieten das Einbetten in andere Seiten. Das ist eine Einstellung der getesteten Seite, kein Fehler hier.<\/p>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  \/\/ iPhone Duo: au\u00dfen 1398\u00d72034 px, innen 2670\u00d71878 px (aufgeklappt quer). Viewport \u2248 @3x.\n  var MODES = {\n    closed:{w:466,h:678,label:'Au\u00dfendisplay 5,4\u2033',px:'1398 \u00d7 2034 px'},\n    land:  {w:890,h:626,label:'Innendisplay 7,6\u2033 \u00b7 quer',px:'2670 \u00d7 1878 px'},\n    port:  {w:626,h:890,label:'Innendisplay 7,6\u2033 \u00b7 hoch',px:'1878 \u00d7 2670 px'}\n  };\n  var state={open:false, orient:'land'};\n  var $=function(id){return document.getElementById(id)};\n  var device=$('dtDevice'), screen=$('dtScreen'), holder=$('dtHolder'), stage=$('dtStage'),\n      frame=$('dtFrame'), input=$('dtInput'), spec=$('dtSpec'), shield=$('dtShield'), empty=$('dtEmpty');\n  if(!device) return;\n\n  function current(){ return state.open ? MODES[state.orient] : MODES.closed; }\n\n  function layout(){\n    var m=current(), pad=state.open?12:14;\n    device.style.padding=pad+'px';\n    device.style.borderRadius=(state.open?44:52)+'px';\n    screen.style.borderRadius=(state.open?32:40)+'px';\n    screen.style.width=m.w+'px'; screen.style.height=m.h+'px';\n    var fullW=m.w+pad*2, fullH=m.h+pad*2;\n    var availW=Math.max(260, stage.clientWidth), availH=Math.max(360, window.innerHeight*0.78);\n    var s=Math.min(1, availW\/fullW, availH\/fullH);\n    device.style.transform='scale('+s+')';\n    device.style.setProperty('--dt-s', s);\n    holder.style.width=(fullW*s)+'px'; holder.style.height=(fullH*s)+'px';\n    device.classList.toggle('open',state.open);\n    device.classList.toggle('land',state.orient==='land');\n    device.classList.toggle('port',state.orient==='port');\n    spec.innerHTML='<b>'+m.label+'<\/b> \u00b7 Viewport '+m.w+' \u00d7 '+m.h+' \u00b7 '+m.px+' \u00b7 Zoom '+Math.round(s*100)+' %';\n  }\n\n  \/\/ Bedienung der Vorschau: erst nach Klick, damit das Scrollen der Seite nie h\u00e4ngt\n  function activate(){ device.classList.add('active'); }\n  function deactivate(){ device.classList.remove('active'); }\n  shield.addEventListener('click',activate);\n  empty.addEventListener('click',function(){ input.focus(); });\n  holder.addEventListener('mouseleave',deactivate);\n  document.addEventListener('pointerdown',function(e){ if(!holder.contains(e.target)) deactivate(); });\n\n  function normalize(v){\n    v=(v||'').trim(); if(!v) return '';\n    if(!\/^https?:\\\/\\\/\/i.test(v)) v='https:\/\/'+v;\n    try{ return new URL(v).href; }catch(e){ return ''; }\n  }\n  function load(v, push){\n    var u=normalize(v); if(!u) return;\n    empty.hidden=true;\n    deactivate();\n    frame.src=u;\n    if(push){\n      try{\n        var q=new URLSearchParams(location.search);\n        q.set('url',u.replace(\/^https?:\\\/\\\/\/,'').replace(\/\\\/$\/,''));\n        history.replaceState(null,'','?'+q.toString());\n      }catch(e){}\n    }\n  }\n\n  $('dtForm').addEventListener('submit',function(e){ e.preventDefault(); load(input.value,true); });\n  $('dtClosed').addEventListener('click',function(){ state.open=false; sync(); });\n  $('dtOpen').addEventListener('click',function(){ state.open=true; sync(); });\n  $('dtRotate').addEventListener('click',function(){ state.orient=state.orient==='land'?'port':'land'; sync(); });\n  function sync(){\n    $('dtClosed').setAttribute('aria-pressed',!state.open);\n    $('dtOpen').setAttribute('aria-pressed',state.open);\n    $('dtRotate').disabled=!state.open;\n    layout();\n  }\n  window.addEventListener('resize',layout);\n\n  \/\/ Keine Standardseite: Vorschau startet leer. Geteilte Links (?url=\u2026) f\u00fcllen nur das Feld und laden erst nach Klick auf \u201eTesten\u201c.\n  var shared=null;\n  try{ shared=new URLSearchParams(location.search).get('url'); }catch(e){}\n  sync();\n  if(shared){ input.value=shared; }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c4f7be e-flex e-con-boxed e-con e-parent\" data-id=\"5c4f7be\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-09e5a15 e-con-full e-flex e-con e-child\" data-id=\"09e5a15\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be3e70a elementor-widget__width-initial reveal-text elementor-widget elementor-widget-heading\" data-id=\"be3e70a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Finde heraus, was deine Website wirklich ausbremst<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1afcfba elementor-widget elementor-widget-spacer\" data-id=\"1afcfba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b53d76c e-con-full e-flex e-con e-child\" data-id=\"b53d76c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-364b486 elementor-align-center liquid elementor-widget elementor-widget-button\" data-id=\"364b486\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI3MDIiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Kostenlose Website-Analyse erhalten<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a61e88a elementor-widget__width-inherit elementor-widget-mobile__width-inherit elementor-widget-tablet__width-initial elementor-widget elementor-widget-heading\" data-id=\"a61e88a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">100% kostenlos und unverbindlich<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Wie sieht deine Website auf dem iPhone Duo aus? Gib deine URL ein und teste deine Website auf beiden Displays des iPhone Duo. Das Tool ist kostenlos, braucht keine Anmeldung und l\u00e4uft direkt im Browser. Website-Adresse Testen Beim Testen l\u00e4dt dein Browser die eingegebene Website direkt von deren Server. Dabei gelten die Datenschutzbestimmungen dieser Website. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3051","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/pages\/3051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/comments?post=3051"}],"version-history":[{"count":10,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/pages\/3051\/revisions"}],"predecessor-version":[{"id":3072,"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/pages\/3051\/revisions\/3072"}],"wp:attachment":[{"href":"https:\/\/vasilidesign.com\/en\/wp-json\/wp\/v2\/media?parent=3051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}