javascript - 媒体查询适用于 chrome 和 Firefox 桌面，但不适用于移动设备

Question

我有一个网站，当我在我的 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

任何人都可以告诉我如何正确查看对齐问题或它有什么问题。

提前致谢

Answer 1

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 中。希望对您有所帮助。