时间戳

首页 > 解决方案 > 媒体查询在 chrome 和 Firefox 桌面上工作，但在移动设备上不工作

javascript - 媒体查询在 chrome 和 Firefox 桌面上工作，但在移动设备上不工作

问题描述

我有一个网站，当我为不同的设备调整它的大小时，当我在我的 chrome 和 Firefox 上进行媒体查询时，它可以正常工作，但是当我在移动设备中查看该网站时，它遇到了对齐问题，主要是在 iPhone 手机中，我无法在 chrome 和 Firefox 中查看，所以无法修复它

我的头部如下所示：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- css file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Title -->
<title>BookTheParty</title>
<!-- Favicon -->
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" type="image/x-icon" />
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" />

这是我的网站链接：https ://demo.booktheparty.in

谁能告诉我如何正确查看对齐问题或有什么问题。

提前致谢

标签： javascripthtmlcssresponsive-design

解决方案

Responsive CSS Should be in

@media (min-width:320px) { /* 智能手机，纵向 iPhone，纵向 480x320 手机 (Android) */ }

@media (min-width:480px) { /* 智能手机、Android 手机、横向 iPhone */ }

@media (min-width:600px) { /* 纵向平板电脑、纵向 iPad、电子阅读器 (Nook/Kindle)、横向 800x480 手机 (Android) */ }

@media (min-width:801px) { /* 平板电脑、横向 iPad、低分辨率笔记本电脑和台式机 */ }

@media (min-width:1025px) { /* 大横向平板电脑、笔记本电脑和台式机 */ }

@media (min-width:1281px) { /* 高分辨率笔记本电脑和台式机 */ }

问题在于您的响应式 CSS。我希望这能帮到您。

推荐阅读