プロが教える店舗＆オフィスのセキュリティ対策術

メディアクエリ、iosやAndroidでデバイスごとにCSSを変更する

解決済

  • 質問者：零礼
  • 質問日時：
  • 回答数：3件

首記の件、iOSとAndroidでデバイスが異なる事により、同じCSSを記入しても違った表示がされることが多々あります。
そこで、AndroidならAndroid用のCSSを表示させ、iosならiosのCSSを表示させるようにしたいのですがうまくいきません。
どなたか教えて頂きたくお願い致します。

下記ソースコードになります。

JavaScript；
if(navigator.userAgent.indexOf('Android') > 0) {
let test = document.querySelector('.self_content_text');
body.classList.add('Android');
}

if(navigator.userAgent.indexOf('iPhone') > 0) {
let test = document.querySelector('.self_content_text');
body.classList.add('iPhone');
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
HTML；
<div class="self_content_text">
はじめまして。代表の〇〇です。<br>
縁あってこのような仕事に携わることができました。思えば今まで培ってきたIT職種のスキルが、自分の大好きなアニメや漫画といった仕事にまで携われるようになるとは夢にも思いませんでした。<br>
よく聞くのが趣味を仕事にしてはいけないという事です。大好きなものに仕事を持<br>
ち込んでしまうと、大好きなものが嫌いになってしまうからだと。<br>
正直、私自身も不安はあります。ですが、今まで一生懸命仕事をやってきて、その<br>
上でこのような事が訪れたという事はむしろチャンスと捉えています。<br>
皆さんに楽しいを提供できる力になると信じて邁進していきますので、どうかみな<br>
さんも楽しみにして頂ければと思います。</div>
</div>

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
CSS；
.Android {
line-height: 60px;
background-position: 0px 0px;
background-size: 10px 60px; /* line-height に合わせる */
background-color: #fff;
background-repeat: repeat;
font-size: 20px;
background-image:
linear-gradient( 90deg, transparent 20%, #fff 9px ),
linear-gradient(transparent 97%, rgb(250, 75, 75) 0%);
}

.iPhone {
line-height: 60px;
background-position: 0px 0px;
background-size: 10px 82px; /* line-height に合わせる */
background-color: #fff;
background-repeat: repeat;
font-size: 20px;
background-image:
linear-gradient(transparent 97%, rgb(250, 75, 75) 0%);
}
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

質問者からの補足コメント

  • JavaScript；
    if(navigator.userAgent.indexOf('Android') > 0) {
    let test = document.querySelector('.self_content_text');
    test.classList.add('Android');
    }

    if(navigator.userAgent.indexOf('iPhone') > 0) {
    let test = document.querySelector('.self_content_text');
    test.classList.add('iPhone');
    }

    になります、失礼しました。
    まず最初のif~indexOf()でAndroidかiPhoneか文字を読み取り、queryselctor内のクラスにclassを追加(add)してCSSの表示を区分けするというものです。

    No.1の回答に寄せられた補足コメントです。 補足日時：2020/11/04 21:30
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No2です。



画像を利用した場合の例です。
スクリプトやメディアの切り分け等は不要のはずです。
（スマホで確認してはいませんけれど、多分大丈夫かと）

※ ここの掲示板はURLが途中で省略されてしまうので、補完して正しいアドレスに戻す必要があると思いますので、ご注意。


<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#test{ width:600px; }
#test p{
margin:0; padding:0;
line-height:60px;
background-size: 8px 60px;
background-image:url("https://oshiete.xgoo.jp/_/bucket/oshietegoo/imag …
</style>

</head>
<body>
<div id="test">
<p>はじめまして。代表の〇〇です。</p>
<p>縁あってこのような仕事に携わることができました。思えば今まで培ってきたIT職種のスキルが、自分の大好きなアニメや漫画といった仕事にまで携われるようになるとは夢にも思いませんでした。</p>
<p>よく聞くのが趣味を仕事にしてはいけないという事です。大好きなものに仕事を持ち込んでしまうと、大好きなものが嫌いになってしまうからだと。</p>
<p>正直、私自身も不安はあります。ですが、今まで一生懸命仕事をやってきて、その上でこのような事が訪れたという事はむしろチャンスと捉えています。</p>
<p>皆さんに楽しいを提供できる力になると信じて邁進していきますので、どうかみなさんも楽しみにして頂ければと思います。</p>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

No1です。



解決したのかしないのか不明なので、勝手に追加で…


No1の後半に記した画像を利用する方法の例です。
ここの掲示板だと直接画像を引用できないので、先に画像だけを投稿。

それを利用した例示は、この後に投稿します。
「メディアクエリ、iosやAndroidで」の回答画像2
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

回答がないみたいなので・・・




なんとなく方法的にも疑問はありますが、ひとまず、ご提示の内容について。

スクリプトがおかしいようですね。エラーが出ていませんか？
　let test ～～
に関しては、現状では何にも使っていないので、あっても無くても同じことになっています。
一方で、
　body.classList～～
は、いきなりbodyでは通じないブラウザがほとんどではないかと。（エラーになる？）
（もしかすると、IEには通じるのかもしれませんけれど…）最低でも、document.body～～とでもしておく必要がありそうに思います。
　document.getElementsByTagName("body")[0]
とか、あるいは、ご提示のスクリプトでも使用している、querySelectorを利用するとか…

何をどうなさりたいのかよくわかりませんが、デバイスに応じてbodyタグにクラスを設定したいということでしょうか？
それとも、DIV要素にクラスを設定したいのでしょうか？
bodyなら上記を修正すれば良いですし、DIVならtestに取得した要素に設定しないと・・・


もう一つは、ブラウザが対象要素をパースした後にスクリプトを実行しないと、要素が存在しないということになります。
どのような書き方をなさっているのか不明ですが、安全側で考えるなら、スクリプトをbodyの閉じタグの直前に入れておくことでしょうか。

ご質問には関係ありませんが、罫線を点線にしたいようですが、小さな画像を作成しておいてrepeatさせる方法なら、（多分）デバイスを気にしなくても良くなるのではないと思います。
また、htmlで、文章の段落でもないところに<br>タグがあるのが、一番気にはなりました。
（「体裁より以前に文章の構成」という気がしますけれど…）
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報