Question

我有一个网站，可以在这里看到： http://synodins.com/icemaps

它适用于大多数浏览器等，问题出现在手机上。然后引入框变得非常小，并且需要放大以再次变为正常。一旦人们做到了这一切，就像任何台式机/笔记本电脑一样。

但人们不想进行初始缩放，也给人留下了不好的第一印象。

我尝试过以编程方式放大，但这会使jquery自动完成和日历定位不正确。

在移动设备上显示正确尺寸的介绍框的最佳方法是什么？

Answer 1

您可以设置2个代表css文件，一个用于移动设备，另一个用于移动设备（通常由屏幕尺寸和媒体设置）。为每个屏幕尺寸都有：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

或者您需要的尺寸。因此，对于较小的浏览器大小或更改字体大小，使div更大？

Answer 2

我认为您可以使用媒体查询

您可以设置何时应用css语句

@media and screen and (max-width:400px){
    div{
        width:100%;
    }
}
@media and screen and (min-width:400px) and (max-width:1024px){
    div{
        width:80%;
    }
}
@media and screen and (min-width:1024px){
    div{
        width:60%;
    }
}

通过这种方式，您可以通过设置显示尺寸来设置与该尺寸相关的元素的外观。

Div在移动设备上显得很小

2 个答案: