清水建築　動画背景　ストライプ　MAC BOOK とipadで　ストライプがきれいに出ない　重なったり違和感問題の解決方法

サイズ、svgに変換等しても解決ならず、

ちなみに、ユーザーエージェント分岐を入れたが、なぜかipadで背景変わらなかった

クロームのユーザーエージェント偽装ではうまくいってたが、

ヘッダー

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
  //スマホ用CSSを読み込む　?>

  <link href="<?php echo get_template_directory_uri(); ?>/mobile.css" rel="stylesheet" type="text/css" />

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {  
    //タブレット用CSSを読み込む?>

 
  <link href="<?php echo get_template_directory_uri(); ?>/tablet.css" rel="stylesheet" type="text/css" />

<?php } else { 
    //PC用CSSを読み込む　?>




<?php } ?>

 

css

@charset "utf-8";


/* .video-wrap {
    .pattern {


        background-image: url(/wp-content/themes/newD-child/img/bg/kv_bg.png);
        background-size: 6px 6px;
        background-repeat: repeat;

    }} */

 

そんで、結局、

画像に隙間をつくることで　なんとか重なりを軽減

ipad macbook は多分、無理くり解像度を出してるので、

ピクセルが合わないのではないかと思われる

10px 20px このsvgを

 

  .pattern {
    width: 100%;
    height: 100%;
    pointer-events: none;
    
  //background-image: url(/wp-content/themes/newD-child/img/bg/yokojima.svg);
  background-image: url(/wp-content/themes/newD-child/img/bg/yokojima_10.svg);
 background-size: 1px 3px;
  background-repeat: repeat;
  
    //position: fixed;
  position: absolute;
  z-index: 2;
  filter: opacity(60%);

  @media screen and (max-width: 736px){

    background-image: url(/wp-content/themes/newD-child/img/bg/yokojima_mob.png);
    filter: opacity(100%);

    //background-size: 1px 2px;//横　縦
    background-repeat: repeat;
}//@media screen 736px

これが今の正解

モバイルは分岐

それ以外はすべて 1px 3pxに変更した上記svgです。