日: 2021年8月19日

LPでhtml納品でphp分岐できなかったのでJSでビューポート分岐　これもモバイルテストに使えない

<script type="text/javascript">
    

      
      
      
      
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
    
    
      
 var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
  //mob    
      
      
 if (screen.width <= 568 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
      
      
} else {
    // PC
          
           if (screen.width <= 480 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
          
          
  }        
          
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>

結局、横にした時はPCと同じ　という指示にすると、モバフレ合格できないので
JSでやるなら下記

<script type="text/javascript">
    

      
      
      
      
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
    
    
      
 var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
  //mob    
      
      

  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');

      
      
} else {
    // PC
          
           if (screen.width <= 480 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
          
          
  }        
          
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>