解决平板电脑和台式机上移动时的字体问题

Question

我是初学者，希望得到一些帮助，看看我在哪里犯了错误。该字体正在桌面和平板电脑上工作。它也适用于移动设备的横向视图，但在移动设备处于垂直模式时会出现问题，并变得模糊不清。

我已经尝试将字体从像素更改为ems，但仍然不能解决问题。

这里是什么样子的一些照片：

而且，这里是另一个例子：

这里是CSS：

.price-layout{ 
    width: 960px; 
    padding: 0 20px; 
    margin: 0 auto; 
} 

.price-layout #product-image{ 
    border: 0 solid; 
    float: left; 
    margin-left: 37px; 
    margin-right: 0; 
    overflow: hidden; 
    width: 196px; 
    margin-top: 25px; 
} 

.price-layout #product-details{ 
    float: left; 
    width: 625px; 
    margin-left: 10px; 
} 

.price-layout #product-details h1{ 
    font-size: 36px; 
    font-weight: bold; 
    margin-top: 20px; 
} 

.price-layout #product-details h2{ 
    font-size: 2.5em; 
    font-weight: bold; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 

.price-layout #product-details h3{ 
    font-size: 1.5em; 
    font-weight: bold; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    line-height: 70%; 
} 
.price-layout #product-details h3 span{ 
    float:right; 

    font-size: 20px; 
    font-style:italic; 
} 

.price-layout #product-details h3 span a{ 
color: #33628c; 
} 

.price-layout #product-details h3 span a:hover { 
    float:right; 
    font-size: 20px; 
    font-style:italic; 
    color: #000000; 
    text-decoration:none; 
} 


.price-layout #product-details ul.product-status-tabs a{ 
    background-image: url("images/websites/odot.jpg"); 
    background-position: 0 -70px; 
    background-repeat: no-repeat; 
    color: #676767; 
    display: inline-block; 
    font-weight: bold; 
    line-height: 30px; 
    outline: medium none; 
    padding-left: 36px; 
    font-size: 20px; 
} 
.price-layout #product-details ul.product-status-tabs a:hover, .price-layout #product-details ul.product-status-tabs a.active{ 
    background-position: 0 0; 
    color: #33628c; 
} 
.price-layout #product-details ul.product-status-tabs p{ 
    color: #333333; 
    font-family: helvetica; 
    font-size: 12px; 
    line-height: 14px; 
    margin-bottom: 14px; 
    margin-left: 36px; 
} 
.price-layout #product-details ul.product-status-tabs{ 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
} 
.price-layout #product-details ul.product-status-tabs li{ 
    width: 200px; 
    float: left; 
} 


.product-tab-pane { 
    background: none repeat scroll 0 0 #EFEFEF; 
    border-top: 2px solid #4E6385; 
    padding: 20px; 
    position: relative; 
    display: none; 
} 
.product-tab-pane:after, .product-tab-pane:before { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.product-tab-pane:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #33628c; 
    border-width: 10px; 
    margin-left: -30px; 
} 
.product-tab-pane:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #33628c; 
    border-width: 15px; 
    margin-left: -36px; 
} 
.product-tab-pane p{ 
    color: #434343; 
    font-size: 12px; 
    line-height: 14px; 
} 
.product-tab-pane ul{ 
    margin: 0 0 0 18px; 
    padding: 0; 
} 
.product-tab-pane li{ 
    color: #434343; 
    font-size: 12px; 
    line-height: 14px; 
} 
.product-status-tab-contents{ 
    font-family: helvetica,arial,sans-serif; 
    margin-bottom: 30px; 
} 
.product-status-tab-contents #broken:after, .product-status-tab-contents #broken:before { 
    margin-left: -312px; 
} 
.product-status-tab-contents #good:after, .product-status-tab-contents #good:before { 
    margin-left: -112px; 
} 
.product-status-tab-contents #flawless:after, .product-status-tab-contents #flawless:before { 
    margin-left: 88px; 
} 
.rprice-row{ 
    border-top: 1px solid #33628c; 
    clear: both; 
    overflow: auto; 
    padding: 10px 20px; 
} 

.rprice-row:hover{ 
    background-color: #EFEFEF; 
} 
.rprice-row .price-info{ 
    float: left; 
    width: 175px; 
} 
.rprice-row a{ 
    color: #33628c; 
    font-family: arial,sans-serif; 
    font-size: 12px; 
    text-decoration: underline; 
} 
.rprice-row .price-info h2{ 
    color: #33628c; 
    font-family: arial,sans-serif; 
    margin: 0 20 0 6px !important; 
    padding: 0; 
} 
.rprice-row .price-info p{ 
    color: #A3A3A3; 
    font-family: arial,sans-serif; 
    font-size: 13px; 
    margin-bottom: 6px !important; 
} 
.rprice-row .price-site { 
    float: left; 
    margin-top: 15px; 
    width: 240px; 
} 
.rprice-row .price-site ul{ 
    margin-top:-2px; 
} 
.rprice-row .price-site ul li{ 
    list-style:none; 
    width:140px; 
    background: none repeat scroll 0 0 #33628c; 
    padding:4px 10px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    margin:0px 0px 4px 0px; 
} 
.rprice-row .price-site ul li a{ 
    font-style:italic; 
    color:#FFF; 
    font-weight:bold; 
    text-decoration:none; 

} 
.rprice-row .price-site ul li:hover{ 
    background: none repeat scroll 0 0 #00AA51; 
} 
body a.get-paid{ 
    background: none repeat scroll 0 0 #33628c; 
    border-radius: 5px; 
    color: #FFFFFF; 
    float: left; 
    font-size: 26px; 
    height: 65px; 
    line-height: 65px; 
    margin-top: 12px; 
    padding: 0 20px; 
    text-decoration: none; 
} 
body a.get-paid:hover{ 
    background: none repeat scroll 0 0 #00AA51; 
} 
.related-price-list{ 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 20px -20px -20px; 
} 

HTML：

</head> 
<body> 
<div id="header-wrapper"> 
<div class="container" id="header"> 
<div id="logo"> 
<h1><img alt="" height="100" src="images/logo.jpg" usemap="#Map3" width="300" /><map id="Map3" name="Map3"><area alt="RecomHub" coords="33,12,238,85" href="/" shape="rect" /></map></h1> 
</div> 

<div id="menu"> 
<ul> 
    <li class="current_page_item"></li> 
    <li><a href="/sell/iPhone">iPhone</a></li> 
    <li><a href="/sell/iPad">iPad</a></li> 
    <li><a href="/how_it_works">How It Works</a></li> 
    <li><a href="/about">About Us</a></li> 
    <li></li> 
</ul> 
</div> 
</div> 
</div> 

<div class="container" style="margin-top:-10px;margin-bottom:20px"> 
<div class="content"> 
<div class="content-inner"> 
<div id="splash"> 
<h2><strong>Sell your New, Used or Broken iPhone &amp; iPad</strong><br /> 
Select your Apple device to see what&#39;s it worth</h2> 

<div style="margin-top:18px; width:100%;min-height:350px;"> 
<div><script> 

         </script> 
<div class="home-rt iphone" style="opacity: 0.980668;"> 
<div class="recent-trade-img"><a href="/sell/iPhone"><img onmouseout="this.src='images/home_iPhone.jpg';" onmouseover="this.src='images/home_rollover_iPhone.jpg';" src="images/home_iPhone.jpg" /></a></div> 
</div> 

<div class="home-rt ipad" style="opacity: 0.980668;"> 
<div class="recent-trade-img"><a href="/sell/iPad"><img onmouseout="this.src='images/home_iPad.jpg';" onmouseover="this.src='images/home_Rollover_iPad.jpg';" src="images/home_iPad.jpg" /></a></div> 
</div> 

<div class="clear"></div> 

Answer 1

尝试增加

h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */ 
    font-weight: normal; 
} 

对于一些原因，如果您使用的是不包括一个大胆的重量的字体，那么浏览器就会创建一个虚假的大胆抵消了。

更新
问题是专门为一些iPhone的Safari浏览器，所以有看到它在其他地方的小机会。

Answer 2

我无法复制我的android手机上的问题，假设这是在您的实际网站上。我的猜测是iPhone上的webkit中的字体渲染问题。它会在尝试调整与屏幕大小/布局成比例的字体时发生。试试这个：

@media only screen and (max-device-width: 480px) { 
    html { 
     -webkit-text-size-adjust: none; 
    } 
} 

这应该禁用iPhone上的字体大小调整而不会影响桌面webkit浏览器。

您可以在此Article中找到有关此问题的更多信息。