如何在CSS中正确设置网格以实现适合移动设备的视图?(Python Dash项目)

问题描述

我一直在使用这个简单的仪表板，可以使用此链接查看.源代码在这里，而CSS文件就是问题所在在这里.我使用了网格布局，不确定是否适合该项目，但是我选择它是因为我想获得一些经验.我当前的目标是使其移动友好.我使用了 @media only屏幕和(最大宽度:800像素)来转换移动视图的布局.当我在PC上缩小页面时它可以工作，但是当我在移动视图上对其进行测试时，它不起作用(我尝试使用其他 max-width 值(例如400px或600x)，但它不起作用.我该如何解决?

I have been working on this simple dashboard which can be viewed using this link. The source code is here and the CSS file which is where the problem lies is here. I used grid layout, not sure if it's appropriate for this project, but I chose it becuase I wanted to get some experience with it. My current goal is to make it mobile friendly. I used @media only screen and (max-width: 800px) to transform the layout for mobile view. It works when I shrink the page on my pc but when I test it on mobile view it doesn't work (I tried using different max-width values such as 400px or 600x and it didn't work. How do I Fix that?

推荐答案

我通过在 app = dash.Dash(__ name __)中添加元标记来解决它，如下所示:

I solved it by adding meta tag to app = dash.Dash(__name__), looks like this:

app = dash.Dash(__name__,
            meta_tags=[{'name': 'viewport',
                        'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}]
            )

这篇关于如何在CSS中正确设置网格以实现适合移动设备的视图?(Python Dash项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！