Question

我已经完成了网站，它在所有移动设备上工作正常但在Iphone5中字体大小不接受。它比我在css代码中提供的更大，更大胆。低于我给出的共同代码

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;

所以我想要为IPHONE 5添加任何特定代码。谢谢

Answer 1

仅为iPhone 5添加此medai查询

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

Answer 2

我不确定这是否是最好的方法，但你可以在检测到iphone时在js / jQuery中设置样式。

 jQuery(document).ready(function($){
    var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
    if (agentID) {
      /*set some style here*/
    }
});

另外，如果您的文字在iPhone上太大，您可以尝试：

-webkit-text-size-adjust: 90%;

无论如何，Helvetica Nue不是标准字体，所以如果你不使用外部字体导入，它们在某些设备上可能看起来不同。

Answer 3

要定位移动设备，您需要确保标题中包含以下内容：

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

然后在样式表中添加移动媒体查询：

@media (max-width:767px) {
    /* Add mobile specific styles here */
}

我知道在你的问题中你想只定位一个iphone5，但是最好添加一个媒体查询来定位所有移动设备，你不会遇到任何问题，只能在移动设备中添加样式媒体查询说。

已编辑的答案

/* iPhone 4/5 portrait mode */
@media (max-width:320px) { 
   p {
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size: 14px; 
     line-height: 20px;
   } 
}

/* iPhone 4/5 landscape mode */
@media (min-width: 321px) and (max-width: 480px) {
   */ Styles go in here */
}

仅针对Chrome中的Iphone5定位CSS代码

3 个答案: