{"id":865,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=865"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"adaption","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=865","title":{"rendered":"adaption"},"content":{"rendered":"<ul>\n<li><a href=\"#1-%EA%B0%9C%EC%9A%94\">1. \uac1c\uc694<\/a><\/li>\n<li><a href=\"#2-%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C\">2. \uc751\uc6a9\uc608\uc81c<\/a><\/li>\n<li><a href=\"#3-%EA%B0%81-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EC%9D%B4%EB%8F%99%EB%B2%84%ED%8A%BC-%EC%B6%94%EA%B0%80\">3. \uac01 \ud398\uc774\uc9c0\ubcc4 \uc774\ub3d9\ubc84\ud2bc \ucd94\uac00<\/a><\/li>\n<\/ul>\n<h2>1. \uac1c\uc694<\/h2>\n<blockquote>\n<p>\uc801\uc751\ud615(adaptive) \ub780 \ub9e4\uccb4\ubcc4 \ud398\uc774\uc9c0\ub97c \ubcc4\ub3c4\ub85c \uc81c\uc791\ud558\ub294 \uae30\uc220\uc774\ub2e4.<br \/>\n\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc811\uc18d \ud658\uacbd\uc744 \uccb4\ud06c\ud6c4 \uc6d0\ud558\ub294 \ud398\uc774\uc9c0\ub85c \ub9ac\ub514\ub809\uc158 \ud55c\ub2e4.<\/p>\n<\/blockquote>\n<h2>2. \uc751\uc6a9\uc608\uc81c<\/h2>\n<h4>\uc608\uc81c<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/mobileDetect-Adaptation\/\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<h4>HTML<\/h4>\n<blockquote>\n<p>root\/index.html<\/p>\n<\/blockquote>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;PC&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;PC\uc804\uc6a9\ud398\uc774\uc9c0&lt;\/h1&gt;\n    &lt;div class=&quot;pc&quot;&gt;PC&lt;\/div&gt;\n    &lt;div class=&quot;mobile&quot;&gt;Mobile&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<blockquote>\n<p>root\/mobile\/index.html<\/p>\n<\/blockquote>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;\ubaa8\ubc14\uc77c&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;\ubaa8\ubc14\uc77c\uc804\uc6a9\ud398\uc774\uc9c0&lt;\/h1&gt;\n    &lt;div class=&quot;pc&quot;&gt;PC&lt;\/div&gt;\n    &lt;div class=&quot;mobile&quot;&gt;Mobile&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h4>JS<\/h4>\n<blockquote>\n<p>\uc0ac\uc6a9\uc790\uc758 \ud574\uc0c1\ub3c4\ub97c \ud655\uc778\ud558\ub294 \ubc29\ubc95<\/p>\n<\/blockquote>\n<pre><code class=\"language-js\">\/* https:\/\/developer.mozilla.org\/ko\/docs\/Web\/API\/Window\/devicePixelRatio *\/\nif (window.devicePixelRatio &gt; 1) {\n  location.href = &#39;mobile\/&#39;;\n}\n<\/code><\/pre>\n<h2>3. \uac01 \ud398\uc774\uc9c0\ubcc4 \uc774\ub3d9\ubc84\ud2bc \ucd94\uac00<\/h2>\n<blockquote>\n<p>pc\uc640 \ubaa8\ubc14\uc77c \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud558\ub294 \ubc84\ud2bc\uc744 \ub9cc\ub4e4\uc790<\/p>\n<\/blockquote>\n<h4>\uc9c0\uc2dc\ubb38<\/h4>\n<blockquote>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/re-detect-Adaptation\">\uc644\uc131\ud654\uba74<\/a><\/p>\n<\/blockquote>\n<h4>PC\ud398\uc774\uc9c0 \ucf54\ub4dc<\/h4>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;PC&lt;\/title&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;h1&gt;PC\uc804\uc6a9\ud398\uc774\uc9c0&lt;\/h1&gt;\n    &lt;button class=&quot;mobile&quot;&gt;Mobile&lt;\/button&gt;\n  &lt;\/body&gt;\n  &lt;script src=&quot;pc.js&quot;&gt;&lt;\/script&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<pre><code class=\"language-js\">\/\/\ubaa8\ubc14\uc77c \uc774\ub3d9\ubc84\ud2bc \uc694\uc18c \uc120\ud0dd\nconst mobile = document.querySelector(&#39;.mobile&#39;);\n\/\/\uc0ac\uc6a9\uc790\uc758 \ubc00\ub3c4 \ud655\uc778\ubcc0\uc218\nlet ratio;\n\/\/\ud604\uc7ac \ud30c\uc77c \uacbd\ub85c\uc5d0 mobile \uc774\ub77c\ub294 \ubb38\uc790\uc5f4\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\ub294\uc9c0 \uac80\uc0ac \uc788\uc73c\uba74 true \uc5c6\uc73c\uba74 fasle\nlet path = location.pathname.split(&#39;\/&#39;).includes(&#39;mobile&#39;);\n\/\/\ud604\uc7ac \ud30c\uc77c \uacbd\ub85c \uc800\uc7a5\nconst page = location.href;\n\n\/\/ \ud604\uc7ac \ud30c\uc77c\uacbd\ub85c\uc5d0 mobile \ubb38\uc790\uc5f4\uc774 \uc5c6\uace0 \ud604\uc7ac \ud30c\uc77c \uacbd\ub85c\uc640 \ubcf4\uace0\uc788\ub294 \ud30c\uc77c\uacbd\ub85c\uac00 \uac19\ub2e4\uba74 (pc\ud398\uc774\uc9c0 \ud655\uc778)\nif (!path &amp;&amp; location.href === page) {\n  \/\/\ud604\uc7ac \ud654\uba74 \ubc00\ub3c4\ud655\uc778\n  ratio = window.devicePixelRatio;\n  \/\/ \ubc00\ub3c4\uac00 2\ubcf4\ub2e4 \ud06c\uba74 \ubaa8\ubc14\uc77c\ub85c \uc774\ub3d9\ud558\uace0 1\ubcf4\ub2e4 \uc791\uac70\ub098 \uac19\uc740\uba74 \ud604\uc7ac \ud398\uc774\uc9c0\ub97c \uc5f0\ub2e4\n  if (ratio &gt; 2) {\n    location.href = &#39;mobile\/&#39;;\n  } else if (ratio &lt;= 1) {\n    location.href = page;\n  }\n}\n\/\/\ubaa8\ubc14\uc77c \ubc84\ud2bc \ud074\ub9ad\uc2dc \ud398\uc774\uc9c0 \uc774\ub3d9\nmobile.onclick = function (e) {\n  e.preventDefault();\n  location.href = &#39;mobile\/&#39;;\n};\n<\/code><\/pre>\n<h4>\ubaa8\ubc14\uc77c\ud398\uc774\uc9c0 \ucf54\ub4dc<\/h4>\n<blockquote>\n<p><strong>Note<\/strong>: \ubaa8\ubc14\uc77c\ud398\uc774\uc9c0\uc5d0\uc11c PC\ub85c\uc758 \uc774\ub3d9\uc2dc \ud53d\uc140\ube44\uc728\uc744 \ud655\uc778\ud558\uac8c \ub420 \uacbd\uc6b0 \ubb34\ud55c\ub8e8\ud504\uc5d0 \ube60\uc9c0\uac8c \ub418\ubbc0\ub85c \ud655\uc778\ud558\uc9c0 \uc54a\ub294\ub2e4.<br \/>\npc\uc774\ub3d9 \ubc84\ud2bc \ud074\ub9ad\uc2dc\uc5d0 href \uac12\ub9cc \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n<\/blockquote>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;mobile&lt;\/title&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;h1&gt;\ubaa8\ubc14\uc77c\uc804\uc6a9\ud398\uc774\uc9c0&lt;\/h1&gt;\n    &lt;button class=&quot;pc&quot;&gt;PC&lt;\/button&gt;\n  &lt;\/body&gt;\n  &lt;script src=&quot;mobile.js&quot;&gt;&lt;\/script&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<pre><code class=\"language-js\">const pc = document.querySelector(&#39;.pc&#39;);\nlet path = location.pathname.split(&#39;\/&#39;).includes(&#39;mobile&#39;);\nconst page = location.href;\npc.onclick = function (e) {\n  e.preventDefault();\n  if (path &amp;&amp; location.href === page) {\n    location.href = &#39;.&#39;;\n  }\n};\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. \uac1c\uc694 2. \uc751\uc6a9\uc608\uc81c 3. \uac01 \ud398\uc774\uc9c0\ubcc4 \uc774\ub3d9\ubc84\ud2bc \ucd94\uac00 1. \uac1c\uc694 \uc801\uc751\ud615(adaptive) \ub780 \ub9e4\uccb4\ubcc4 \ud398\uc774\uc9c0\ub97c \ubcc4\ub3c4\ub85c \uc81c\uc791\ud558\ub294 \uae30\uc220\uc774\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc811\uc18d \ud658\uacbd\uc744 \uccb4\ud06c\ud6c4 \uc6d0\ud558\ub294 \ud398\uc774\uc9c0\ub85c \ub9ac\ub514\ub809\uc158 \ud55c\ub2e4. 2. \uc751\uc6a9\uc608\uc81c \uc608\uc81c \ubbf8\ub9ac\ubcf4\uae30 HTML root\/index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ko&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; \/&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt; &lt;title&gt;PC&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;h1&gt;PC\uc804\uc6a9\ud398\uc774\uc9c0&lt;\/h1&gt; &lt;div class=&quot;pc&quot;&gt;PC&lt;\/div&gt; &lt;div class=&quot;mobile&quot;&gt;Mobile&lt;\/div&gt; &#8230; <a title=\"adaption\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=865\" aria-label=\"adaption\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-865","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=865"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/865\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}