-1

ここでは、デバイスの幅に応じてメタ タグを設定したいので、問題を詳しく説明します。

現在、モバイル バージョンとフル バージョンを含む Web サイトがあります。モバイル バージョンは、幅が 480px 未満のモバイル デバイスでのみ動作し、フル バージョンは他の幅で動作します。

次のように設定すると、メタタグを設定しようとすると問題が発生します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

私はモバイルでうまく機能し、ウェブサイトはタブレットでズームされて表示されます.

そして、私がこれを使用する場合:

<meta name="viewport" content="width=1100, initial-scale=1, maximum-scale=1">

私はデスクトップとタブレットで問題なく動作し、モバイル バージョンがモバイルに表示されないことは確かです。

それで解決策は何ですか、私はヘッダーHTMLにそのようなものが欲しいです:

if(device-width <= 480) 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

elseif(device-width > 480) 
    <meta name="viewport" content="width=1100, initial-scale=1, maximum-scale=1">

では、これを行う方法は？

4

2 に答える 2

0 
if ($(window).width() >= 768 && $(window).width()) <= 1024)
 $('meta').attr('name', 'viewport').attr('content', 'minimum-scale=1.0, maximum-scale=1.0').appendTo('head')
else if ($(window).width() >= 320 && $(window).width() <= 568)
$('meta').attr('name', 'viewport').attr('content', 'maximum-scale=1.0').appendTo('head')
于 2014-05-26T12:55:13.243 に答える
0

jquery append メソッドで試すことができます

お気に入り

<script type="text/javascript">
if(device-width <= 480){
$('head').append(' <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
}
elseif(device-width > 480)
{
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">'); 
}

    </script>
于 2014-05-26T12:54:39.693 に答える