最新バージョンの Bootstrap を使用して、ブランド領域のテキストをロゴに置き換えたいと考えています。私のデスクトップでは完璧に見えますが、私の iPhone では、ロゴは小さな折りたたみメニューの下に表示されますが、ロゴはその横 (左側) にあるはずです。ロゴを小さくすると、iPhone では問題なく動作しますが、小さいロゴはデスクトップ サイトには小さすぎます。ロゴに img-responsive クラスを追加すると、それに応じて縮小されると思いましたが、失敗します。これを複製する場合、ロゴは幅 276 ピクセル、高さ 40 ピクセルです。
横向きの iPhone では、すべてが正常に表示されます (これは、ほとんどの人が携帯電話を自然に持つ方法である縦向きで表示する場合に厳密に問題になります)。
関連するコードは次のとおりです (下の方に購入ボタンがあります。これは iPhone では自動的に非表示になります。他に選択肢がない場合は、これで十分です)。究極の解決策は、画面サイズに基づいてロゴを縮小することです。
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Application <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="features.php">Features</a></li>
<li><a href="screenshots.php">Screenshots</a></li>
<li><a href="demos.php">Demos</a></li>
<li class="divider"></li>
<li><a href="purchase.php">Purchase</a></li>
<li><a href="licensing.php">Licensing Model</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="documentation.php#tab1">Version Info</a></li>
<li><a href="documentation.php#tab2">System Requirements</a></li>
<li class="divider"></li>
<li><a href="documentation.php#tab3">Installation Guide</a></li>
<li><a href="documentation.php#tab4">Integration Guide</a></li>
<li><a href="documentation.php#tab5">Frontdesk Manual</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/support/knowledgebase.php">Knowledgebase</a></li>
<li><a href="/support/index.php?a=add">Submit Ticket</a></li>
<li><a href="/support/ticket.php">View Ticket Status</a></li>
<li class="divider"></li>
<li><a href="services.php#tab1">Installation Service</a></li>
<li><a href="services.php#tab2">Development Services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="faq.php">Presales Questions</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Legal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="legal.php#tab1">Privacy Policy</a></li>
<li><a href="legal.php#tab2">Terms of Use</a></li>
<li><a href="legal.php#tab3">Site Security</a></li>
<li class="divider"></li>
<li><a href="legal.php#tab4">Money Back Guarantee</a></li>
</ul>
</li>
</ul>
<a href="purchase.php"><button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button></a>
</div>
<!--/.nav-collapse -->