div部分未出现在手机上

Question

我有一个div，我在这里向学生显示PDF以供学习。对于台式机和平板电脑版本，PDF的显示效果绝对不错。

我的问题是在移动设备和手持设备上，整个div垂直缩小并且仅显示一条细线。我想纠正这个问题，但是我不知道响应式css的实现。

我可以对同一问题有一些见解吗？我不知道如何针对移动视图进行更正。

我的代码：

<div id='viewer' class='pdf-viewer' oncontextmenu='return false' data-url='../admin/studyMaterial/underdevelopment_pdf.pdf'></div>

和pdf-viewer类：

.pdf-viewer {
  background: #909090;
  border: 1px solid #ddd;
  height: 400px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}