2

私の問題は、折りたたみ可能なブロックの「アコーディオン」メニューにあります。私は最初にオンラインのチュートリアルに従いましたが、折り畳み可能なブロックを適用するようになって初めて、チュートリアルがかなり古いものであり、チュートリアルからコピーしたスクリプトが次のとおりであることに気付きました。

これらのスクリプトでは、折りたたみ可能なコンテンツをデフォルトで閉じるように設定することはできないため、 data-collapsed="true は単に機能せず、デフォルトでメニューが開いています。多くのグーグル検索の後、他の人が同じ問題を抱えているようで、アップグレード時に最新のスクリプトバージョンに問題が分類されたため、現在の最新バージョンに更新すると、次のようになります。

data-collapsed="true は機能しましたが、すべてのページが画面上で小さくなります。下のスクリーンショットを参照して、意味を確認してください。

ここで何が問題なのですか、それは css の問題ですか?

私がこれを持っていた古いスクリプトを使用して: http://www.magnetikmedia.co.uk/m/old_script.png

ここに画像の説明を入力

私がこれを持っていた新しいスクリプトを使用して：http://www.magnetikmedia.co.uk/m/new_script.png

ここに画像の説明を入力

Galaxy Note の画面が大きいことは知っていますが、モバイル サイト エミュレーターを使用すると (さまざまなハンドセットでサイトを表示するために)、サイトは問題なく表示されます (ただし、今朝、iPhone 5 のエミュレーターでサイトを閲覧すると、スクリーンショットのように画面が縮小するので、どこかにバグがあるに違いありません）あるページの先頭から最後までのコードはここにあります。他のページは内容が異なるだけで同じです

<head>
<title>Page Title</title>
<link rel="stylesheet" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

</head>

<body>


<!-- Start of first page -->
<div data-role="page" id="home">

<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->

<div data-role="content">   
    <ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>

<li><a href="#about">
<div class="mobile_menu_hpage"></div>
  <div class="list-text">About Us</div>
</a></li>

<li><a href="#getsocial">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Get Social</div>
</a></li>

<li><a href="#services">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Services</div>
</a></li>

<li><a href="http://www.magnetikmedia.co.uk/portfolio.htm">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Portfolio</div>
</a></li>

   <li><a href="http://www.magnetikmedia.co.uk/contact.htm">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Contact Us</div>
</a></li>
</ul>   
</div><!-- /content -->

  <div id="footer1">
<div id="footer_left">
<div align="center"><a href="http://www.facebook.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.twitter.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://magnetikmedia.blogspot.co.uk"><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.linkedin.com/in/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></a></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
  <div align="center"><!-- /footer -->

  </div>
</div><!-- /page -->
4

1 に答える 1