[英]Media query doesn't apply on footer section when viewed from a mobile phone but works when resize the browsers screen
The issue I have is, the footer section when viewed from desktop is very responsive and when i change the view port size to mobile and tablet, it's still responsive.我遇到的问题是,从桌面查看时的页脚部分非常敏感,当我将视口大小更改为移动设备和平板电脑时,它仍然可以响应。 But when I open the app from my mobile phone, the footer looks unstyled.
但是当我从手机打开应用程序时,页脚看起来没有样式。
This is how it looks from desktop 360px.这是从桌面 360px 看起来的样子。 Very responsive enter image description here
非常敏感,请在此处输入图片说明
but from my mobile phone, it looks like this enter image description here但是在我的手机上,看起来像这样在此处输入图片说明
Here's live site's link : https://aginamena.github.io/Designo-Multi-Page-Website-/#/ Here's github repo : https://github.com/aginamena/Designo-Multi-Page-Website-这是现场站点的链接: https : //aginamena.github.io/Designo-Multi-Page-Website-/#/这里是 github repo: https : //github.com/aginamena/Designo-Multi-Page-Website-
This is not a media-query issue but the css property - position: absolute
in the footer container is messing up the alignment in the Safari browser.这不是媒体查询问题,而是页脚容器中的 css 属性 -
position: absolute
扰乱了 Safari 浏览器中的对齐方式。 I see your issue in Desktop Safari responsive design mode and iPhone device Safari browser.我在桌面 Safari 响应式设计模式和 iPhone 设备 Safari 浏览器中看到了您的问题。 Desktop Chrome and Android device Chrome browser loads the footer fine.
桌面 Chrome 和 Android 设备 Chrome 浏览器可以正常加载页脚。
I would suggest creating a footer container with the position: relative
and another div with flex without using any absolute positioning.我建议创建一个带有
position: relative
的页脚容器position: relative
和另一个带有 flex 的 div 而不使用任何绝对定位。 Then adjust the margin as you want it.然后根据需要调整边距。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.