iPad 肖像 css 样式不起作用答案

【问题标题】：iPad portrait css styling isn't workingiPad 肖像 css 样式不起作用
【发布时间】：2014-01-16 12:09:02
【问题描述】：

通过 iPad 在纵向模式下，我需要将 div 浮动到左侧。无论插入什么代码，都不会改变。这就是我正在做的事情：

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .logos{
     float: left;
   }
 }

我正在开发的网站：http://rachelsilberman.com/rob-anolik/

当有人在 iPad 上时，“logos” div 会向下推，我需要它向左浮动，以便与联系人 div 对齐。

我一直在使用 ipadpeek.com 查看结果，因为我自己没有。希望这不会产生影响。

谢谢！

【问题讨论】：

标签： css ipad media-queries portrait

【解决方案1】：

您应该将属性添加到您的 ipad css 中，如下所示：

    @media only screen and (min-device-width: 768px) 
and (max-device-width: 1024px) and (orientation:portrait) {
      .logos{
         float: left;
       }
     }

IPAD CSS 的一般规则如下：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

【讨论】：

我所有的样式都在一个文档中...所以你是说我需要为肖像创建一个单独的样式？
不是必须的，你可以为 ipad 肖像样式添加 and (orientation:portrait)。

【解决方案2】：

我今晚想通了。这可能对其他人有所帮助。我不得不在 library.php 文件中注释掉以下行：

<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->

在此之后，所有内容都引用了我想要的主要 style.css 表。我包括了两个陈述：

@media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {

和

@media (max-device-width: 600px) and (orientation: portrait) {

由于我在 Blackberry Playbook 与 iPad 上观察到的问题，我不得不介绍第二条 @media 行。我只是在我的 style.css 代码的这些部分中调整了值，瞧！最终一切正常。

这是一个关于不同尺寸屏幕的好网站：http://nmsdvid.com/snippets/

【讨论】：