Question

今天我尝试使用CSS调整<div>的大小。它适用于Safari，Firefox和Linux等桌面浏览器。 Chrome，但它无法在iPad上运行。

我想在不使用JavaScript的情况下实现<div>的大小调整。使用resize CSS属性，用户只需拖动<div>即可调整大小。

根据Apple自己的文档resize is supported on iOS since version 1，但我看不到如何在iOS上调整<div>的大小。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Flexbox resize</title>
    <style>
    section {
        width: 800px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
    }
    div.left, div.right {
        outline: solid 1px #ccc;
        overflow: auto;
    }
    div.left {
        width: 20%;
        resize: both;

    }
    div.right {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
    }
</style> 
<body>
    <section>
        <div class="left"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div> 
        <div class="right"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        </div>

    </section>
</body>
</html>

Answer 1

如果iPad上不支持resize属性，那么我担心你会被卡住 - 没有任何其他非JavaScript方式允许用户调整HTML元素的大小。< / p>

（请注意，resize在Internet Explorer或Opera上也不起作用。）

Answer 2

如果您重新考虑使用Javascript，则可以使用jQuery UI Touch Punch，因为在iOS上，即使使用jQuery UI，您仍然会陷入困境。

CSS调整大小不适用于iPad的属性

2 个答案: