{"id":1061,"date":"2023-02-16T08:00:44","date_gmt":"2023-02-16T08:00:44","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1061"},"modified":"2023-02-16T08:00:44","modified_gmt":"2023-02-16T08:00:44","slug":"responsive-view-test","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/de\/responsive-view-test\/","title":{"rendered":"Responsive View Test"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><h1>Responsive Preview<\/h1>\n<div class=\"responsive-preview-tool\">\n  <div class=\"url-input\">\n    <label for=\"url-field\">Enter URL:<\/label>\n    <input type=\"text\" id=\"url-field\" placeholder=\"https:\/\/example.com\"><br>\n    <button id=\"go-button\">Go<\/button>\n  <\/div>\n  <div class=\"preview-area\">\n    <iframe id=\"preview-frame\"><\/iframe>\n    <div class=\"device-options\">\n      <select id=\"device-select\">\n        <option value=\"\">Select a Device<\/option>\n        <option value=\"iphone5\">iPhone 5<\/option>\n        <option value=\"iphone6\">iPhone 6<\/option>\n        <option value=\"iphonex\">iPhone X<\/option>\n        <option value=\"ipad\">iPad<\/option>\n        <option value=\"macbook\">MacBook<\/option>\n      <\/select>\n      <select id=\"orientation-select\">\n        <option value=\"portrait\">Portrait<\/option>\n        <option value=\"landscape\">Landscape<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n<\/div>\n<\/section>\n<style>\n.responsive-preview-tool {\n  position: relative;\n}\n\n.preview-area {\n  position: relative;\n}\n\n#preview-frame {\n  width: 98%;\n  height: 1000px;\n  border: 2px solid #55555e;\n  margin-top:30px;\n}\n\n.device-options {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 10px;\n}\n\n.device-options label{\n  margin-right: 10px;\n}\ninput[type=\"text\"] {\n  padding: 10px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  width: 50%;\n}\n\n\n<\/style>\n\n<script>\nconst urlField = document.getElementById(\"url-field\");\nconst goButton = document.getElementById(\"go-button\");\nconst deviceSelect = document.getElementById(\"device-select\");\nconst orientationSelect = document.getElementById(\"orientation-select\");\nconst previewFrame = document.getElementById(\"preview-frame\");\n\nconst devices = {\n  iphone5: {width: 320, height: 568},\n  iphone6: {width: 375, height: 667},\n  iphonex: {width: 375, height: 812},\n  ipad: {width: 768, height: 1024},\n  macbook: {width: 1440, height: 900}\n};\n\ngoButton.addEventListener(\"click\", () => {\n  previewFrame.src = urlField.value;\n});\n\ndeviceSelect.addEventListener(\"change\", (event) => {\n  const device = event.target.value;\n  const orientation = orientationSelect.value;\n  if (device in devices) {\n    if (orientation === \"portrait\") {\n      previewFrame.style.width = `${devices[device].width}px`;\n      previewFrame.style.height = `${devices[device].height}px`;\n    } else {\n      previewFrame.style.width = `${devices[device].height}px`;\n      previewFrame.style.height = `${devices[device].width}px`;\n    }\n  }\n});\n\norientationSelect.addEventListener(\"change\", (event) => {\n  const device = deviceSelect.value;\n  const orientation = event.target.value;\n  if (device in devices) {\n    if (orientation === \"portrait\") {\n      previewFrame.style.width = `${devices[device].width}px`;\n      previewFrame.style.height = `${devices[device].height}px`;\n    } else {\n      previewFrame.style.width = `${devices[device].height}px`;\n      previewFrame.style.height = `${devices[device].width}px`;\n    }\n  }\n});\n\n\n<\/script>\n\n\n\n<style>\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Responsive Preview Enter URL: Go Select a DeviceiPhone 5iPhone 6iPhone XiPadMacBook PortraitLandscape<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1061","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/de\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/1061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/comments?post=1061"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/1061\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/media?parent=1061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}