Question

我已经在文档的头部放入了我的元标记但是当我在iphone或ipad上加载网站时，它看起来仍然与桌面网站相同。您可以在www.thairapyexeter.co.uk上查看我的网站

我的HTML：

<head>

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

  <title>Thairapy Hair, Beauty + Barbers</title>

  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="css/menu.css" media="screen" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content = "width=device-width, initial-scale=1">

</head>

以下是我编写媒体查询的示例：

CSS：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 400px) {
/* Styles */
.menu nav ul li {
  display: block;
  float: left;
  width: 50%!important;
  position: relative;
  height: 33%!important;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.offersmenu nav ul li {
  display: block;
  float: left;
  width: 100%;
  position: relative;
  height: 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    background: center no-repeat red;
    z-index: 1001;
    cursor: pointer;
}
.arrow {
  position: fixed;
  width: 40px;
  z-index: 1004;
}
.treatmentsmenu nav ul li {
width: 100%;
height: 50%;
}
.lightbox-prev {
    background-image: url("../previous.png")!important;
}
.lightbox-next {
    right: 0;
    background-image: url("../next.png")!important;
}

Answer 1

在代码之间检查此代码

<?php   
    if(strtotime($row['entry_cutoff_date']) < strtotime($today)){
        $output = "<td style='text-align: center;  padding-top:30px; padding-bottom:30px;'><a href='event-list.php' style='background:#428bca; border: 5px solid #000; box-shadow: 5px 5px 3px #666666; font-size: 16px; height: 65px;line-height: 16px; padding: 15px 30px; width: 137px; color:#FFF;'><b> Closed ".$row['entry_cutoff_date']."</b></a><br /><br /></td>";
    }elseif(strtotime($row['accept_entries_date']) > strtotime($today)){
        $output = "<td style='text-align: center;  padding-top:30px; padding-bottom:30px;'><a href='event-list.php' style='background:#428bca; border: 5px solid #000; box-shadow: 5px 5px 3px #666666; font-size: 16px; height: 65px;line-height: 16px; padding: 15px 30px; width: 137px; color:#FFF;'><b>Registration opens on ".$row['accept_entries_date']."</b></a><br /><br /></td>";
    }else{
        $output = "<td style='text-align: center;'>
                     <form name='ingfrm' action='event.php' method='post'>
                        <input type='hidden' name='txtevent_id' id='txtevent_id' value='".$_SESSION['event_id']."' />
                        <input type='submit'  style='background-image: url(images/signup_button.jpg); color: transparent; width: 143px; height: 80px;' alt='' border='0' name='submitimage' value='signup' />
                     </form>
                     <br /><br />
                   </td>";
    }

    echo $output;

?>

CSS媒体查询：

$( "*" ).each(function() {
     $(this).attr("src");
});

在调整浏览器大小但不在移动设备上时，媒体查询在桌面上工作

1 个答案: