Html 手机上谷歌浏览器中未显示网站_Html_Css_Wordpress

Html 手机上谷歌浏览器中未显示网站

html css wordpress

Html 手机上谷歌浏览器中未显示网站,html,css,wordpress,Html,Css,Wordpress,根据设备的不同，我有两个要显示的表格版本。在桌面上一切都很好，但在手机上，我无法用谷歌浏览器显示桌面。。不过，它确实与三星互联网合作。我有一个S9。。但我已经在8号音符上测试过了，它不起作用有人能告诉我我做错了什么吗。网页是 CSS是- @media screen and (min-width: 768px) { table.table_seapoint{ width: auto; position: relative; margin-top: -50px; text-ali

根据设备的不同，我有两个要显示的表格版本。在桌面上一切都很好，但在手机上，我无法用谷歌浏览器显示桌面。。不过，它确实与三星互联网合作。我有一个S9。。但我已经在8号音符上测试过了，它不起作用

有人能告诉我我做错了什么吗。网页是

CSS是-

@media screen and (min-width: 768px) {

    table.table_seapoint{
 width: auto;
 position: relative;
 margin-top: -50px;
 text-align: center;
}
    table.table_seapoint_mobile
    {display: none;}

}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {

    table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table.table_seapoint_mobile
    {display: none;}

}

@media screen and (max-width: 770px) and (orientation : portrait) {
table.table_seapoint_mobile{
  margin-top: -50px;
    width: 100%;
 position: relative;
 text-align: center;
margin-bottom: -60px;
}
    table.table_seapoint {
        display: none;
    }
}

HTML是-

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<table class="table_seapoint">
<tbody>
<tr>
<td rowspan="10"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="250" height="219" /></td>
<td colspan="4">
<h1 style="font-weight: lighter;">STUNNING LUXUARY FLOWER BOUQUETS</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">FRESHLY CUT AND HAND DELIVERED</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">IN SEA POINT AND</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ACROSS THE WESTERN CAPE</h1>
</td>
</tr>
<tr>
<td><img class="valign size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">BEST PRICE PROMISE</td>
</tr>
<tr>
<td style="padding-left: 10px;" colspan="3">100% MONEY BACK GUARANTEE</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">QUICK AND EASY ONLINE ORDERING</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">24/7 CUSTOMER SUPPORT</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" colspan="3">HAPPINESS ASSURED</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-4385" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;" nowrap="nowrap"><b> 079 885 9609 </b></td>
<td style="padding-left: 30px;"><img class="alignnone size-full wp-image-4386" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" /></td>
<td style="padding-left: 10px;"><b> hello@flowersforeveryone.co.za </b></td>
</tr>
</tbody>
</table>
<table class="table_seapoint_mobile">
<tbody>
<tr>
<td style="text-align: center;" colspan="4"><img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/test_image.jpg" alt="" width="60%" height="60%" /> :</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4">
<h1 style="font-weight: lighter;">STUNNING LUXUARY FLOWER BOUQUETS</h1>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4">
<h1 style="font-weight: lighter;">FRESHLY CUT AND HAND DELIVERED</h1>
</td>
</tr>
<tr>
<td style="text-align: center; padding-bottom: 7px;" colspan="4">
<h1 style="font-weight: lighter;">IN SEA POINT AND ACROSS THE WESTERN CAPE</h1>
</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
BEST PRICE PROMISE</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
MONEY BACK GUARANTEE</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
QUICK AND EASY ONLINE ORDERING</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
24/7 CUSTOMER SUPPORT</td>
</tr>
<tr>
<td style="padding-left: 40px;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/greentick.jpg" alt="" width="25" height="25" />
HAPPINESS ASSURED</td>
</tr>
<tr>
<td colspan="4">
<h1 style="font-weight: lighter;">ORDER BEFORE 12PM FOR NEXT DAY DELIVERY</h1>
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/phone-1.jpg" alt="" width="25" height="25" />079 885 9609</td>
</tr>
<tr>
<td style="text-align: center;" colspan="4"><img class="alignnone size-full wp-image-4337" src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/envelope-1.jpg" alt="" width="25" height="25" /><b>hello@flowersforeveryone.co.za</b></td>
</tr>
</tbody>
</table>
<div class="stuff">[recent_products per_page="3" columns="3" orderby="title" order="ASC" paginate="true" category="featured" width=300px]</div>

借

试试这些媒体查询

使用肖像媒体查询非常容易出错，我不会使用它。

好的，那么我应该这么说吗？-atmixin仅适用于手机{@media max width:599px{table.table_seapoint_mobile{margin top:-50px；width:100%；position:relative；text align:center；margin bottom:-60px；}table.table_seapoint{display:none；}}我将它们放在wordpress的CSS定制程序中。。。但上面说的是未知规则。。。它仍然不起作用不，你只放@media{}，但是使用最小宽度设置，因为你遇到的问题是因为你正在使用并且没有问题。。我已经更新了CSS代码。。请查看问题中的更新。。但是它仍然不起作用。这对我来说很好。我唯一经历的是在某个断点上有第二个表，但它是同一个表的副本。

@media (max-width: 599px) { 
table.table_seapoint_mobile{
  margin-top: -50px;
    width: 100%;
 position: relative;
 text-align: center;
margin-bottom: -60px;
}
    table.table_seapoint {
        display: none;
    }
}

@media (min-width: 600px) {
table.table_seapoint_mobile{
  margin-top: -50px;
    width: 100%;
 position: relative;
 text-align: center;
margin-bottom: -60px;
}
    table.table_seapoint {
        display: none;
    }   
}


@media (min-width: 900px) {
table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table.table_seapoint_mobile
    {display: none;}

}

 @media (min-width: 1200px) { table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table.table_seapoint_mobile
    {display: none;}

}

  @media (min-width: 1800px) { 
        table.table_seapoint{
 width: auto;
 position: relative;
 text-align: center;
 margin-top: -50px;
}
    table

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}