Fancybox 按钮在手机上太小（non-responsive 网站）

Question

Fancybox 按钮（<、>、x、标题）在我的 android 上非常小，我的视口是静态的：

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

我无法使用 'width-device, initial-scale=1.0'，因为它没有响应，而且显示我的网站不正确，所以我需要一个静态 (non-responsive) 网站的解决方案..

也许与此插件的 css/js 个文件有关？

Answer 1

你需要over-ridefancybox提供的默认样式

例如，要使标题变大，您可以使用

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

至 over-ride，确保在包括 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);
}

Fancybox 按钮在手机上太小（non-responsive 网站）

Fancybox buttons are too small on mobile (non-responsive site)

javascript

android

gallery

viewport

fancybox