Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 在iOS上字体太小,但在android和桌面上可以吗?_Html_Ios_Css - Fatal编程技术网

Html 在iOS上字体太小,但在android和桌面上可以吗?

Html 在iOS上字体太小,但在android和桌面上可以吗?,html,ios,css,Html,Ios,Css,iOS手机/平板电脑是否存在无法调整字体和css设置大小的问题?当我在Android上查看您的视图时,它工作得很好。有人能解释一下或者帮我解决吗?见下图: 安卓 iOS 链接: 下面是一段代码: <div class="twocol smwidth"> <div class="col1"> <h2>The Situation</h2> <p> For vacationers, de

iOS手机/平板电脑是否存在无法调整字体和css设置大小的问题?当我在Android上查看您的视图时,它工作得很好。有人能解释一下或者帮我解决吗?见下图:

安卓

iOS

链接: 下面是一段代码:

<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>
方法是(一如既往):步骤1-使所有浏览器的行为相同。第2步-解决问题。Android上的字体增强功能可以禁用:。媒体查询可以解决小字体问题:。这有用吗

例如:

@media screen and (max-width:1000px) {
  p {font-size: 300%!important;}
}

问题不在于字体大小,而在于你是如何使事情响应的。您应该去掉固定宽度,并用最大宽度替换它们。此外,您还应该向图像中添加
img{max width:100%;}
。当你这样做的时候,一切都会得到适当的响应,一路上解决你的问题。我已经在这个文件中修复了它:

这是由Android上的字体增强引起的:如果我想让ios拥有与Android相同的字体怎么办?它应该调整大一些,但是在ios上字体太小了。在我的css中,我看不出是什么原因导致了这种情况。我不想禁用脚部提升功能。如果有什么需要的话,我希望iOS的字体与Android上显示的相同。如果字体在Android上看起来很好,如何使用media query修复iOS上的字体?等等。。。我只是意识到这是你的解决方案,使网站响应。是的,我想修复的字体大小在iOS上看起来像Android。我似乎无法找到如何做到这一点,或者我的css有什么问题。请参阅JSFIDLE链接。我已再次更新了答案。现在,您的字体在呈现小于1000px宽度的设备上“增强”,如答案中所述。在模拟器上进行了测试。一切正常。请注意,iOS设备正在显示正确的行为,而Android设备正在显示意外的行为,而不是相反。您是否有任何关于iOS/Android行为的有用参考链接?感谢您花时间帮助我理解和解决此问题,JoostS。
@media screen and (max-width:1000px) {
  p {font-size: 300%!important;}
}