css - 電話用に最適化された絶対位置

Question

ページ上の 1 つの画像の CSS 位置に問題があります。その画像を常に右上隅に保持する必要があるため、画像にこのスタイルを使用することにしました: HTML:

 <div class="head">
    <div class="content nm">
        <div class="menu_inline"><a href="Homepage">Home</a></div>
        <div class="menu_inline"><a href="Help">Help Center</a></div>
        <div class="corner">
            <img src="{$basePath}/images/corner.png" alt="GOOGLE PLAY" id="corner">
        </div>
      </div>
    </div>

CSS:

.#corner { display:inline; position: absolute; top:0px; right: 0px;}

デスクトップブラウザーではすべて正常に動作しますが、問題は、スマートフォン (テスト済みの Android および iPhone) にページをロードすると、ページをロードするとページがズームされ、画像がメニューやページの他のコンテンツを覆うことです。下の写真で問題を確認できます。

この写真を修正する方法について、何かアドバイスはありますか。ブラウザはおそらくユーザーの幅を計算してから配置することを理解しています

問題のある画像へのリンク

Answer 1

head タグ内のページにこれを追加してみてください。