Question

使用此代码，使用bootstrap：

<div class="container">
    <h1 class="display-2 text-black text-left">Small Business Marketing</h1>
    <h2 class="display-5 text-black text-left">Free Consultation. Affordable Help.</h2>
    <a class="btn btn-outline-light btn-lg float-left" href="services.html" role="button">Find out more.</a>
</div>

一切都很好，除了小型iPhone。在iPhone大约15个像素的＆＃34;营销＆＃34;在h1被砍掉了。由于文本溢出，它还会创建一些尴尬的页面切换和空白。好像容器没有停留在屏幕尺寸范围内，因为它正在被文本放大。

我通过使用行类包装h1来进行临时修复：

<div class="container">
    <div class="row">
        <h1 class="display-2 text-white text-left">Small Business Marketing</h1>
    </div>
    <h2 class="display-5 text-white text-left">Free Consultation. Affordable Help.</h2>
    <a class="btn btn-outline-light btn-lg float-left" href="services.html" role="button">Find out more.</a>
</div>

这样可行，但现在标题真的吻了左边，并没有看起来很正确。我觉得理想的解决方案是一个较小的响应字体大小，我期待引导响应能力照顾。这将继续成为一个问题的一个原因是再增加一个字母营销，即Marketingg，第二个g完全消失。

根据https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

，我的视口设置正确

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

编辑：介绍第一行添加bootstrap

iPhone上的Bootstrap标题没有正确调整大小

0 个答案: