javascript - 调整网页大小以适应手机

问题描述

我在我的笔记本电脑上创建了一个小项目来显示一个可以显示方向服务的网站，但它只能在我的笔记本电脑上工作，因为我的手机尺寸太小了。

显示机动的右侧面板仅在输入出发地和目的地后才会出现。但是，在我的手机上，我无法输入出发地和目的地，因为它不适合我的手机尺寸。

我试过了

<meta name="viewport" content="width=device-width, initial-scale=1.0">

请问有什么办法可以调整地图使其适合手机吗？我只能在手机上看到“右侧面板”，但我在手机上输入出发地和目的地时它仍然是空白的。

我的html页面是：

<body>
<input id="origin-input" class="controls" type="text" 
placeholder="Enter an origin location">

<input id="destination-input" class="controls" type="text"
placeholder="Enter a destination location">

<div id="mode-selector" class="controls">

<input type="radio" name="type" id="changemode-walking" 
checked="checked">
<label for="changemode-walking">Walking</label>

<input type="radio" name="type" id="changemode-driving" >
<label for="changemode-driving">Driving</label>
</div>

<div id="right-panel">
<p id="Direction"></p>
<p id="Arrows"></p>
</div>

<div id="map"></div>

标签： javascripthtmlcss

javascript - 调整网页大小以适应手机

问题描述

解决方案

推荐阅读