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

Question

我有一个网站，当我在我的 chrome 和 Firefox 上为不同的设备调整大小时，媒体查询它是否正常工作，但是当我在移动设备中查看该网站时，它遇到了 alignment 问题，主要是在我无法使用的 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

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

提前致谢

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 中。 我希望这能帮到您。