そのWebサイト用に水平スクロール視差Webサイトを作成しました。ブラウジングデバイスに基づいて背景画像を追加したい
例えば
通常のPC<img src="bg.png">
からタブレット<img src="bg-500px.png">
から小型携帯電話から<img src="bg-small.png">
私が試したこれに対する解決策をどのように得ることができますか <body onload="fun()">
に
fun(){
var bg=d.getEBI("img id");
if(window.innerwidth=referenceWidth)
{
bg.src=respective-img.png
}
}
1つのアプローチは、メディアクエリCSS MediaQueriesを使用してCSSを介してそれを行うことです。背景画像付きで<img>使用する代わりに<div>
<div class="background"></div>
/*For mobile*/
@media (max-width: 480px) {
.background {
background-image: bg-small.png;
}
}
/*For Tablet*/
@media (max-width: 1024px) {
.background {
background-image: bg-500.png;
}
}
/*For Desktop*/
@media (min-width: 1024px) {
.background {
background-image: bg.png;
}
}
質問で述べたようにJavaScriptを介してそれを実行したい場合は、少し注意が必要です。次の手順で行う必要があります
手順1.外部ライブラリを使用してデバイスタイプを検出します（例：JSでのデバイス検出）
手順2.タグの代わりにカスタムHTMLタグsay <myimg>（HTMLカスタム要素）を使用する<Img>
手順3.このカスタムHTMLタグのイベントリスナーを登録し、このイベントリスナー内で、手順1で検出されたデバイスタイプに基づいて画像のsrcタイプを変更します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加