JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="test"></div>

SCSS

//デバイス画面サイズ
@mixin max-device-width-query($width:320px) {
    @media only screen and (max-device-width: #{$width}) {
    @content;
  }
}

@mixin max-device-height-query($height:480px) {
    @media only screen and (max-device-height: #{$height}) {
    @content;
  }
}

@mixin max-deviceSize-query($width:320px, $height:480px) {
    @media only screen and (max-device-width: #{$width}) and (max-device-height:#{$height}){
    @content;
  }
}

//ビューエリア
@mixin max-width-query($width: 320px) {
    @media only screen and (max-width: #{$width}) {
    @content;
  }
}
@mixin max-height-query($height: 416px) {
    @media only screen and (max-height: #{$height}) {
    @content;
  }
}

@mixin max-viewSize-query($width:320px, $height:416px) {
    @media only screen and (max-width: #{$width}) and (max-height:#{$height}){
    @content;
  }
}

@mixin for-iPhone-query {
  @include max-deviceSize-query(640px, 960px);
}

@mixin for-iPhone5-query {
  @include max-deviceSize-query(640px, 1136px);
}

//360x640px
@mixin for-720x1280-query {
  @include max-deviceSize-query(720px, 1280px);
}

//270px480px
@mixin for-540x960-query {
  @include max-deviceSize-query(540px, 960px);
}

//240x427px
@mixin for-480x854-query {
  @include max-deviceSize-query(480px, 854px);
}

//240x400px
@mixin for-480x800-query {
  @include max-deviceSize-query(480px, 800px);
}

#test {
  position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
  background:#efefef;
    
  @include max-height-query(416px) {
     background:blue;
  }
}

JavaScript

//'<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">'
var el = new Element('meta[name=viewport][content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0"]');
console.log(el)
$$('head')[0].grab(el);