Galaxy Galaxy fold 的媒体查询
Media query for galaxy Galaxy fold
我想更改在 galaxy fold 设备上查看页面时的字体大小。但我不确定如何使用媒体查询来处理这个问题。任何人都可以帮助我并告诉我如何解决这个问题吗？
如果您需要折叠版设备的媒体查询，您可以使用 320 像素的屏幕宽度。
流行设备中没有其他设备具有这样的屏幕宽度，因此您可以简单地使用此媒体查询。或者，您可以使用 npm 中的 JS 模块来检测设备并动态更改字体大小
@media(max-width: 320px){
font-size: 10px
}
截至目前，有设备状态的草案 API。以前是 'Screen Fold' API 允许以下类型的媒体查询：
@media (device-posture: laptop) and (spanning: single-fold-horizontal){}
这通常可以解决折叠屏幕的响应问题。
遗憾的是，这尚未实现，使用 navigator.useragent 属性 等替代方法不可靠，不推荐使用。
如果你只使用 @media(max-width: 320px) ，代码将影响其他设备示例: (Galaxy S8 Galaxy s7 ...)，使用此 css 解决问题 :
@media (min-width: 280px) and (max-width: 320px) { .your-class { font-size: 10px; } }
我想更改在 galaxy fold 设备上查看页面时的字体大小。但我不确定如何使用媒体查询来处理这个问题。任何人都可以帮助我并告诉我如何解决这个问题吗？
如果您需要折叠版设备的媒体查询，您可以使用 320 像素的屏幕宽度。
流行设备中没有其他设备具有这样的屏幕宽度，因此您可以简单地使用此媒体查询。或者，您可以使用 npm 中的 JS 模块来检测设备并动态更改字体大小
@media(max-width: 320px){
font-size: 10px
}
截至目前，有设备状态的草案 API。以前是 'Screen Fold' API 允许以下类型的媒体查询：
@media (device-posture: laptop) and (spanning: single-fold-horizontal){}
这通常可以解决折叠屏幕的响应问题。
遗憾的是，这尚未实现，使用 navigator.useragent 属性 等替代方法不可靠，不推荐使用。
如果你只使用 @media(max-width: 320px) ，代码将影响其他设备示例: (Galaxy S8 Galaxy s7 ...)，使用此 css 解决问题 :
@media (min-width: 280px) and (max-width: 320px) { .your-class { font-size: 10px; } }