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

Question

我有一个网站，当我进行媒体查询时，它在我的 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" />

这是我的网站 link : 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。希望对您有所帮助。

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

Media query working in chrome and Firefox desktop but not in mobile devices

html

javascript

css

responsive-design