2016-10-16 4 views
-2

私はMediaWikiで動くようにHTMLウェブサイトを適応させなければならなかった。ウェブサイトはhttp://2016.igem.org/Team:UrbanTundra_Edmontonです。 MediaWikiは基本的に、サーバー上に.HTMLファイルを置くのではなく、すべての作業を行うテキストエディタにあなたを限定しているため、多くのバグがありました。しかし、私はほとんどのバグを修正することができました。唯一の、おそらく最も厄介なバグは、ウェブサイトの応答性です。サイズ変更されたGoogle Chromeのウィンドウと同じように、ウェブサイトをモバイルでも見えるようにするにはどうすればよいですか?

たとえば、Google Chromeウィンドウでウェブサイトのサイズを変更すると、ウェブサイトは正常に動作します。しかし、携帯電話で同じWebサイトを開くと、nav-toggleが画面外に移動し、一般的なレイアウトがはずれます。さまざまなメディアを通してウェブサイトを見ると、私の不十分な記述に比べてより良い理解が得られます。

実際には大きな問題でしたが、私がここにきて助けに来ることにしました。私は基本的にChromeの「Inspect Element」を使用して、パディングとマージンの値を変更して、すべてが見栄えになるようにしました。そして、本当に、サイズを変更したChromeウィンドウでは、うまく見えます。

次にChromeのモバイルエミュレータ(Dev Toolsに組み込まれています)を試してみましたが、試用版とエラーの方法を使用しても問題ありません。

誰かが私を助けてくれるのではないか、少なくともサイズ変更されたChromeのウィンドウに表示されていることを私に伝えるためのヒントを携帯に表示したいのですか?

+1

メタビューポートタグはありますか? – SLaks

+0

はい、あります。実際、私は当初は持っていなかったし、多くの問題に直面していました。それを追加した後、応答性の点で多くの問題が修正されました。あなたはreisizedクロムウィンドウと携帯電話のウェブサイトを見ましたか? –

答えて

0

回答が見つかりました!私は実際には、ユーザーのスケーラブルなパラメータを追加し、何にそれを設定していないする必要がありました

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

:私のメタタグは次のように読んでください!だから、それはのように読み取ります知っている:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;" /> 

今、すべてが意図したように動作します!

関連する問題