3
今日、CSSを使用して<div>のサイズを変更しようとしました。 Safari、Firefoxの& Chromeのようなデスクトップブラウザで動作しますが、iPadでは動作しません。CSSサイズ変更プロパティがiPadで機能しない
JavaScriptを使用せずに<div>のサイズ変更を実装したいと思います。 resize CSSプロパティを使用すると、ユーザーは<div>をドラッグするだけでサイズを変更できます。
アップル独自のドキュメント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>
iosでのCSSのサポートは非常に貧弱です。あなたはモバイルサファリをかなり更新したios5にアップグレードすることから始めるべきです。また、SafariとモバイルSafariは同じブラウザではありません。 IE7とChrome16を比較することになります。リンクしているドキュメントはうまく機能しています。これは、デスクトップのサファリ専用リソースのように見えます。 ios5以降では 'position：fixed'が追加されました（間違っています）。 –
@Ben：iOS5をチェックしましたが、 'resize'をサポートしていないようです。ドキュメンテーションの「ポジション：固定」のスタンスには良い点があります。不正確な箇所も気づいています。私は、モバイルサファリのCSSサポートが "かなり貧弱"だと私が同意するかどうかはわかりません。私は 'position：fixed'を故意に放棄して、ネイティブアプリであると思われるウェブアプリのリスクを避け、' resize'がまだサポートされていないのは驚きではないと思います。 –
@Ben：iOSの制限と矛盾するCSS機能を除いて、Mobile Safariはかなり完全にCSSをサポートしていて、IE7はChromeに比べてデスクトップSafariに非常に近いようです16. –