viewportの動作について

解決済

質問者：dcx147
質問日時：2011/09/30 09:20
回答数：1件

PC用のサイトをhtml5(wordpress)で作成しました。
ドコモのXperia acro SO-02Cでサイト見ると、画面に収まりきっておらず
横スクロールをするか縮小しないと画面上に収まりません。

調べると、viewportのmetaタグが必要な様で、headタグを下記のように
してスマホで確認したのですが何も変わっていません。

PCサイトの横幅は960pxで組んでおりリキッドレイアウトではありません。

いくつかのサイトを見てみましたが、スマホ用のサイトとして作成しないPC用の
サイトは画面上に収まった状態で表示され必要であれば自分で拡大して表示
するという感じでした。

※同様にリキッドレイアウトではなくxhtmlで作成されておりviewportのmetaタグもありませんでした。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title('', true, ''); ?></title>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.rollover.js"></script>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/images/common/favicon.ico" type="image/x-icon">
<link rel="Shortcut Icon" href="<?php bloginfo('template_directory'); ?>/images/common/favicon.ico" type="image/x-icon">
<?php wp_head(); ?>
</head>

どうすれば、スマホで開いた際の初期状態を画面に収まるようにできますか？