-
どの機種でも同じ位置にボタンが表示されるよう修正したい
トピックス by
1792 pt
2023年9月14日 13:33
268
PV
【Widget名】
画像の中の画像が動く
【修正したいこと】
こちらのページの最下部の動くボタンですが、iPhoneで見たときとAndroidで見たときと、ボタンの位置が異なります。どの機種でも同じ位置にボタンが表示されるよう修正したいです。
【参考画像】
- iPhone：https://gyazo.com/4ee2c75e41503458cde740dcfc3a7c17
- Android：https://gyazo.com/6e7f551a55ff30bf5db64c811edcb756
-
3 コメント
-
▪️ lazyloadのコードをJavaScript Headに追記してください。
【参考】
「※要JavaScript」がついているWidgetの使い方
【追記するコード】
<script>
~
_.setEnquete = function(el) {
~
}
//以下追記 -----
_.lazyImgLoaded = function (object, callback) {
object = Array.from(object).filter((img) => {
return img.matches('.lazyload:not([data-ll-status])');
});
if (typeof LazyLoad === 'undefined' || !(object.length)) {
if (!callback) return;
callback();
return;
}
let preload = 'lazypreload-';
let n = 0;
while (document.querySelector('.' + preload + n)) n++;
Array.from(object, el => {
el.classList.add(preload + n);
el.classList.remove('lazyload');
});
lazyLoadInstance.update();
const lazyPreloadInstance = new LazyLoad({
elements_selector: '.' + preload + n,
callback_loaded: function (element) {
element.classList.remove(preload + n);
},
callback_finish: function () {
if (!callback) return;
callback();
}
});
lazyPreloadInstance.loadAll();
};
//ここまで追記 ------
//太字を追記（3,5行目）
_.init = function() {
Array.from(document.querySelectorAll(classes.target), el => {
_.lazyImgLoaded(el.querySelectorAll("img"), function () { 追記
_.setEnquete(el);
});追記
});▪️なお、上記修正にともない、ボタンの位置がずれてしまうため、以下のWidgetのCSSを調整くださいませ。
.txt-on span {
width: 80%;
top: 73%; こちらを既存の80%から調整ください
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
animation: puruY 1s forwards infinite;
}参考画像：https://squadbeyond.gyazo.com/2ead25b0c84ebe19c31d6b71919a8ae0
例えば73％に変更した場合、以下のように修正されます。
-
修正してみましたが、次は横にずれてしまいました・・・！
iPhoneでの実機プレビュー、Androidでの実機では問題ないのですが、iPhoneの実機で見ると横にずれているようです。
https://gyazo.com/d319e86a2ef056fb14a4dedd8da94737
修正方法を教えていただきたいです！
-
ボタンの配置がデバイスによりズレる問題ですが、
デバイス毎の画面サイズや処理の違いから、
指定する距離が大きければ、それだけズレが大きくなる可能性がございます。
今回の場合、下方向への配置というところですが、
上を基準に 70% の位置で指定しているため、
下から指定する方がズレか小さくなると思われますので、
一度下記CSSの調整をしていただけますでしょうか？
[ 修正前 ]
.txt-on span {
width: 80%;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
animation: puruY 1s forwards infinite;
}[ 修正後 ]
下記を調整しております。
top: 70% → bottom: 15%;
left: 50%; → left: 10%;
transform: translate(-50%, -50%); → 削除
.txt-on span {
width: 80%;
bottom: 15%;
left: 10%;
position: absolute;
animation: puruY 1s forwards infinite;
}こちらでも解消されないという場合には、お気軽にお問い合わせくださいませ。