Fancybox按钮在移动设备上太小（无响应的网站）

Question

我将Fancybox 3用于gallery。

我的android上的Fancybox按钮（＆lt;，＆gt;，x，caption）非常小，我的视口是静态的：

<meta name="viewport" content="width=640">

我不能使用'width-device，initial-scale = 1.0'因为它没有响应，并且显示我的网站不正确所以我需要一个静态（无响应）网站的解决方案..

也许这个插件的css / js文件有什么关系？

Answer 1

您需要覆盖 fancybox提供的默认样式。

例如，为了使标题更大，您可以使用类似

的内容

@media (max-width: 800px)
.fancybox-caption {
    font-size: 35px;
}

要覆盖，请确保在包含jquery.fancybox.css后包含上述样式

Answer 2

如果您愿意，可以使用CSS轻松扩展所有界面元素，例如：

.fancybox-infobar__body, .fancybox-button {
  transform: scale(1.5);
}

Answer 3

谢谢大家，我用Niket提供的媒体查询逐个更改了它们，效果很好，现在我知道还有一个更短的方式@Janis ......： - ）

这里是我想要知道的人的css：

@media all and (max-width: 800px) {
.fancybox-caption {
    line-height: 35px;
    font-size: 30px;
}
.fancybox-infobar__body {
    font-size: 30px;
    width: 120px;
    line-height: 60px;
    margin-left: 10px;
}
.fancybox-button {
    width: 60px;
    height: 60px;
    line-height: 60px;
}
.fancybox-button--close::before, .fancybox-button--close::after {
    height: 3px;
    width: 30px;
    left: calc(50% - 15px);
}