代码之家 › 专栏 › 技术社区 › Scott Skiles

为什么“设备宽度”不适用于Android的Chrome?

google-chrome css

Scott Skiles · 技术社区 · 6 年前

我正在参考这本指南,了解如何 make a mobile friendly website. “在我的Android Chrome浏览器上似乎没有效果。

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

我把这个添加到了我的Django静态文件中 app.css 而且它肯定是在网站上,因为我可以看到它使用Chrome开发工具在我的笔记本电脑上。然而,当我使用我的Android手机(Galaxy S8,如果有必要的话)时,它不适合屏幕。

我也有这个 base.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

一些后续问题:我需要清空手机上的缓存吗?如何在手机上使用Chrome开发工具来检查网站的CSS?

2 回复 | 直到 6 年前

henk.io 6 年前

据我所知,这只是对以下HTML元标记的基于css的替换:

<meta name="viewport" content="width=device-width, initial-scale=1">

index.html 除此之外,您还需要添加 @media 查询以使其对各种屏幕大小做出响应。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px)  ... 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px)  ... 

// Medium devices (tablets, less than 992px)
@media (max-width: 991px)  ...

除了上述基于PX的断点外,还可以使用基于DPI的断点: https://css-tricks.com/snippets/css/retina-display-media-query/

但要真正回答你关于远程调试控制台的问题,我不知道还有什么比ChromeDeveloperToolsforMobile(Ctrl+Shift+M)更管用的了

doğukan 6 年前

使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> .

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前