タブレットポートレートとランドスケープモードで表示したときに自分のサイトのデスクトップバージョンを拡大したいが、モバイルデバイスの場合はスケールしたくないモバイル向けサイトの最適化バージョン。タブレットのスケーリングを許可するがモバイルは許可しない方法
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
モバイルデバイス上のサイトを見ているときだけに、このための最善の方法は何を適用している。現時点では私は以下のメタタグを持っていますか？
THanks任意のヘルプ。
ビューポートを作成し、CSSメディアクエリを使用してターゲットを設定します。
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
デバイス検出のためのWURFLを使用することを検討してhttp://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
をチェックしてください。 WURFLのリポジトリでは、特定のデバイスにさまざまなライブラリ、CSSなどを読み込むことができます。
WURFLこんにちは、私はすでに別のデバイスを対象とするメディアクエリを持っているタブレット
if (is_tablet == 'true') {
//do this or load your scaling
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}else{
echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
}
しかし、WURFLライセンスには注意してください。 –
のための特定のAPIコールを持っています。問題は、初期スケールを1に設定する方法でした。モバイルデバイスのみで、タブレットでは使用できません。私はちょうど画面のサイズが768pxよりも小さい場合、javascriptを使用してメタビューポートタグを書き出すだけです。これはやっているようだ – user1153594
記録のために、私はこの「モバイル向けに最適化された」ことを行うサイトを嫌い、モバイルデバイスのズームを禁止している。 iPhoneのWebページを見ていると、ズームインして画像などを見てみることができます。 –
私は同意します。また、バナー広告。最近、CBSはモバイルサイトでひどい苦労をしています。{ –