人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

iPod touch 4世代、iOS 6.1.2です。今回はSafariのことについての質問です。
タップするごとに色が変わっていく(赤→緑→青→赤→緑…)スクリプトを作りました。

色が変わっていくのは良いのですが、何故か左下と右下の部分が赤くなっています。
なお、PCのChromeで確認したところ、このようなことは起きませんでした。
これを修正することはできますか?

(html、スクリプトは補足に書きます。)

1362236490
●拡大する

●質問者: Hiroto
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #space_1 {
 height: 100%;
}
</style>
<script>
function Initialization() {
 document.body.style.backgroundColor = "#ff0000";
 a = "red";
}
function func_1() {
 switch (a) {
 case "red":
 document.body.style.backgroundColor = "#00ff00";
 a = "green";
 break;
 case "green":
 document.body.style.backgroundColor = "#0000ff";
 a = "blue";
 break;
 case "blue":
 document.body.style.backgroundColor = "#ff0000";
 a = "red";
 break;
 }
}
</script>
</head>
<body onload="Initialization();" style="">
<div id="space_1" onclick="func_1();">
</div>
</body>
</html>

(一部省略してあります)

また、画像からデータURIスキームを使用したということが分かりますが、これが何かに影響するのであれば、教えていただけると嬉しいです。


1 ● fiwa
ベストアンサー

手許に全く同じ環境があったので、試してみました。
しかしどういうわけか、表示が質問者さんのものと違っていました。確かに同じように赤い点ができるのですが、その大きさが違っています。URIスキームの場合と、DropboxのPublicフォルダにhtmlファイルを置いた場合で試してみたのですが、表示は同じでした。

URIスキームの場合
http://f.hatena.ne.jp/fiwa/20130303194611
Dropboxに置いた場合
http://f.hatena.ne.jp/fiwa/20130303194612

それから、styleタグにあるheightの値を変えると赤い部分の長さが変わります。
height: 110%; にすると赤い部分が縦に長くなり、height: 99%; にすると赤い点は見えなくなりました(あくまで、私のものの場合)。
どういうことかはよく分からないのですが、iOS上でのstyleの解釈の問題のような気がするので、いろいろ試してみてはいかがでしょう。


Hirotoさんのコメント
回答ありがとうございます。 赤い点の大きさが異なるのが気になったので考えてみると、「質問者からの補足」に書くときに省略したものの中に、次のような記述がありました。 >|html| <meta name="viewport" content="width=device-width, user-scalable=no"> ||< こうした場合に id:fiwa さんの環境ではどうなるのか、調べていただけると嬉しいです。 よろしくお願いします。

fiwaさんのコメント
ちゃんと赤い部分が同じくらいの大きさになりました。 http://f.hatena.ne.jp/fiwa/20130303200508 styleを height: 99%; にしてみましたが、やっぱり赤い点は見えなくなってますね。

Hirotoさんのコメント
metaタグを入れた場合も確認していただき、ありがたいです。 これはSafariのバグと考えてよさそうな気がします。 height: 99%の場合、赤い点が出なくなるというのも参考になります。 今回はありがとうございました。また機会があればご回答よろしくお願いします。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ