ソースコードを変更してスマホ専用サイトをPCでも表示できるようにする！

2024年7月26日 12:24

1. レスポンシブWebデザインの採用

レスポンシブWebデザインを使用すると、同じHTMLとCSSで異なるデバイスに対応できます。以下は基本的な例です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブサイト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>レスポンシブデザインの例</h1>
        <p>このページは、デバイスの幅に応じてレイアウトが変わります。</p>
    </div>
</body>
</html>

2. ユーザーエージェントによるリダイレクト

スマホ専用サイトとPC用サイトを分けている場合、ユーザーエージェントを使ってリダイレクトする方法もあります。Apacheの.htaccessファイルを使用する例を以下に示します：

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|BlackBerry|iPhone|Windows Phone" [NC]
RewriteRule ^$ /mobile/index.html [L,R=302]

この設定では、モバイルデバイスからのアクセスを検出して、スマホ専用サイトにリダイレクトします1 2。

3. JavaScriptによる動的な切り替え

JavaScriptを使って、デバイスに応じて異なるCSSを適用する方法もあります。以下はその例です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動的CSS切り替え</title>
    <link id="css" rel="stylesheet" href="desktop.css">
    <script>
        window.onload = function() {
            if (window.innerWidth <= 768) {
                document.getElementById('css').setAttribute('href', 'mobile.css');
            }
        };
    </script>
</head>
<body>
    <h1>動的CSS切り替えの例</h1>
    <p>このページは、デバイスの幅に応じて異なるCSSを適用します。</p>
</body>
</html>

これらの方法を使って、スマホ専用サイトをPCでも表示できるように調整してみてください。何か他に質問があれば教えてくださいね！

双極性障害って言う厄介な病を患っています>_< まあ、簡単に言うと　躁状態（凄く心がハイ）鬱状態（凄く心が沈む）の繰り返しです。が..ここ数年躁状態が続いています。そんなこんなで、支離滅裂な事を書く事もありますが..なるべく抑えてるつもりです..