別ページのページ内アンカーリンクをよく使うのですが、IE11で動作しない現象が発生しました。(納品前夜。デバッグする時間は3日だった……)
環境はWordPressです。
リンク元のindex.html
|
1 |
<a href="moge/subpage/#hogehage">別ページへ遷移して</a> |
リンク先のsubpage/
|
1 |
<div id="hogehoge">ここに飛ぶ</div> |
基本はこれで問題がありません。
しかしIEのみうまく動作しなかったのです！！××IE××
ページのリンクは動作すれども、目的のIDに飛んでくれないのです。
飛び先のページでアドレスバーにカーソルを置いてエンターを叩くと、想定通りの動作はします。謎。
このアンカーは非常にバグが多く、様々な解決方が見受けられました。
前回Mac上でIEを動かす方法をご紹介しましたが、今回はmacでAndroidを動かす方法です。
今回もVirtualBoxを使用します。
Androidを動かす方法はたくさんありますが、webデザイナーの動作確認としては今回の方法がおすすめです。他は開発するツールが多く、動作が重いですからね。
以下のサイトで会員登録をして、アプリをダウンロードしましょう。
「trial」ボタンから情報を登録します。
https://www.genymotion.com/#!/
できたらしい。
ここからアプリをダウンロードします。
https://www.genymotion.com/download/
よくわかんないけど、多分これをApplicationフォルダに突っ込みます。
アプリを立ち上げ再度ログインします。
ズラズラと端末が表示されるので、使用したいものを選びます。バージョンやデバイス名でソートできるので便利。
適当に選んでnextを押すと、端末のダウンロードが始まります。
さすがgoogle。Android v4でも崩れない。
Macでも無償でIE、Androidの確認ができて、便利な世の中になりましたね。
Macで糞IEの確認をするのにWindows機やParallelsを購入して、立ち上げて、サーバーにアップして、間違えて、ローカル直して、サーバーにアップして、更新して………キリがありません。。。
そこで、Mac環境でIEをインストールして確認できる方法をご紹介します。
無料で使用できる仮想環境VirtualBoxをインストールしましょう。
VirtualBoxを起動し、解凍した.ovaファイルをダブルクリックしてVirtualBoxに追加する。
するとインポート画面が現れるのでRAMを1024以上に設定する。
User：IE User
Password：Passw0rd!
となります。
Retina対応するために、Photoshopにてレイヤー名を200% hoge01.jpgとして二倍書き出しを行いましたが、ボケてしまいました。
で色々調べていくうちにわかったことは
今回はスマートフィルターが邪魔をしていました。
レイヤーラスタライズをかけてスマートフィルターを破壊適応してしまえばいいのですけど、それだとレイアウトと同じサイズが書き出されてしまうので良くありません。
なので以下の手順を踏みました。
NextGENをアップデートしたところ画像がアップロードできなくなる不具合に見舞われました。
ローカル開発環境で他のプラグインを外したところ見事動いた！
と思ったのですが、本番では動かず……。プラグインの再アップとかデバッグモードにしたりアップデートを待ってたりと時間をかけていたのですが、この方法で解決しました。
続きを読む
準備ができたらscssを選択して右下の「Proccess file」をクリックしましょう。
できました！
ブラウザのライブリロードも非常に高速で。Gulpとかこねくり回してる暇があったらjsの基礎でも覚えたいです。