OGeek|极客世界-中国程序员成长平台

标题: html - iOS 上的字体太小,但在安卓和桌面上可以吗? [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-13 16:51
标题: html - iOS 上的字体太小,但在安卓和桌面上可以吗?

iOS 手机/平板电脑是否存在无法调整字体和 CSS 设置大小的问题?当我在 Android 上查看您的 View 时,它工作正常。有人可以解释或帮助我解决问题吗?见下图:

安卓

Android

iOS

iOS

链接:https://jsfiddle.net/w9357vxo/ 这是一个片段代码:

<div class="twocol smwidth">
    <div class="col1">
         <h2>The Situation</h2>
         <p>
    For vacationers, deciding to take a cruise is exciting, but choosing the right one requires a great deal of information, cost consideration, and input from friends and family. Carnival wanted to make the process easier by recommending cruises that would best suit the lifestyles, demographics and interests of their passengers.
         </p>
         <p>
    They also wanted to make it easy to share details with travel companions. Carnival needed a more personalized communication strategy to help their prospective passengers navigate through the decision process.
         </p>
     </div>
     <div class="col2">
         <h2>The Solution</h2>
         <p>
    Carnival collected email addresses on their homepage as part of the lead generation efforts, but  Nimblefish helped them to capture additional relevant data that would lead to a more personalized communication.  Prospective passengers were asked:
         </p>
         <ul class="list">
             <li>Tell us about yourself! (Are you a Family with small kids? Teens? A group? Single?)</li>
             <li>Where do you want to go? (Alaska? Mexico? Caribbean? Undecided?)</li>
             <li>How do you do fun? (Relax in the sun? Shopping? Explore Nature? Island Adventure?)</li>
             <li>Are you new to cruising? Are you a former guest of Carnival? Where do you live?</li>
        </ul>
    </div>
 </div>

css:

h1 {
  margin:0;
  margin-bottom:25px;
  padding:0;
  font-size:24px;
  font-weight:700;
  text-align:center;
}
h2 {
  margin-bottom:20px;
  padding:0;
  font-size:18px;
  font-weight:800;
}
p {
  font-size:17px;
  color:#808285;
}
.list li {
  font-size:17px;
  color:#808285;
}



Best Answer-推荐答案


问题不在于字体大小,而在于您如何做出响应。您应该摆脱固定宽度并用最大宽度替换它们。您还应该将 img {max-width: 100%;} 添加到图像中。当你这样做时,一切都会得到适当的响应,一路解决你的问题。我已在此文件中修复它:https://jsfiddle.net/uek15fmq/

关于html - iOS 上的字体太小,但在安卓和桌面上可以吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37554791/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/) Powered by Discuz! X3.4