viewportタグを挿入

スマホ・タブレット端末の表示に合わせたサイズに自動で調整してくれる「viewport」というタグがあります。これを、下記のようにhtmlファイルの<head></head>内に追記してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィリップスのシェーバーで深剃りする為のコツ</title>
<meta name="keywords" content="フィリップス,シェーバー,深剃り,コツ">
<meta name="description" content="フィリップスの電気シェーバーでも、やり方次第でしっかり深剃りは可能です!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"> 
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') != -1 || ua.indexOf('Android') != -1){
//iPhone & Android
document.write('<link rel="stylesheet" href="style_mb.css">');
}else{
//PC
document.write('<link rel="stylesheet" href="style.css">');
}
</script>
</head>

※全てのHTMLファイルを書き換える必要がありますが、まずはトップページだけ書き換えてテストしてみましょう。

書き換えが終わったら、サーバーへアップし、スマホで確認してみましょう。すると、こんな感じでピンチイン(スマホの画面を縮小して表示する為の指の操作)しないと見にくい表示になっていると思います。

viewportタグを挿入したウェブサイトの表示画面

モバイルフレンドリーテスト」でチェックしてみても、「コンテンツの幅が画面の幅を超えています」と警告が表示されてしまいます。

モバイルフレンドリーテスト警告

これは、スタイルシート(css)に「width:960px;」などと、スマートフォン用のページとしては、大きすぎる値を指定していることが原因です。これらを、スマートフォンの一般的な画面幅(320px)以内に収まるような数値、もしくは、単位を「%」指定に修正する必要があります。

まずは、レイアウト崩れの原因となりやすい下記の修正を行ってください。

スポンサードリンク