フォームで開始時間と終了時間の二つのselectボックスを表示させたい

JavaScript 教えてgoo

フォームで開始時間と終了時間の二つのselectボックスを表示させたい

久々の回答。レスが付かないとおもってたけど
https://oshiete.goo.ne.jp/qa/10669901.html


3Dプリンタで見台（スマホ台）を作った。しかもシャー専用の赤、滑り止めが3倍ついて滑りにくくなってます。

Fujillin さん欲しい？あげるよ！

3Dプリンタを買う。しかも１台では間に合わず２台購入する！ ANYCUBIC I3 MEGA

造形は楽しいが、印刷に時間がかかりすぎる。
眺めて見ては、色々な問題点やら改良案、造形へのデザイン変更やら・・・
アイディアが尽きる事はない。
それはそれで楽しい。


AMAZONから購入したのだが、すでにプリンタを買った金額の３倍以上の金額をアレコレと購入している。
すでに軽く１０万円は超えた。
会社で経費として落とすかどうかは、成果物をみんなに評価してもらってから。


大量のフィラメントの購入。
失敗に続くトラブルで初号機を破損、部品を購入。
そしてそれを何度となく繰り返す。
予備の部品を購入しまくっているうちに、マシンに詳しくなった。
修理のための分解も行った。ちなみにネジは余らない。


ABS素材の造形は、初心者には難しすぎる。
印刷しているうちに下層の部分が割れて造形物の高さが増え、印刷ヘッドとの隙間がなくなり詰まる。
えらい騒ぎになる。


ヘッドの詰りはライターで炙ってピンセットで抜き取るか、アセトンにつけて溶かす。
作った方脇から造形物が割れないようにと、マシンを覆うケースを自作した。
割れなくなったのは良いのだが、ステッピングモーターに手を当てたらビックリ！
熱い！
4cm角のヒートシンクを大量に購入して、そこいら中のモーターに貼りまくる。
プリンタの基盤とかも冷却しないと寿命が短くなりそうだ。
なのでABS素材は、使わないことにした。
大量に購入したフィラメントはいずれ消費しよう。


そのうち、写真を撮って記録しておこう。とにかく扱いが面倒だ。


結論。
やっぱりオモチャだ。仕事で生かすためには造形に時間が掛かりすぎる。
とにかく寝る間を惜しんで、徹夜の毎日である。
造形を眺めては、アイディアを生む。
観察する時間は、有意義だ。
もう５kgは、印刷した。スキルも上がった。


死ぬまで勉強なのかよ、楽になりたいぜ。

TEXTAREA 要素内で、オートインデントを行う（過去の焼き直し）

JavaScript 
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">

<body>
<h1>textarea 要素の オートインデントを行う</h1>
<p><input id="A"></p>
<textarea id="B" cols="60" rows="10"></textarea>

<script>

//_____autoIndent
{
  const

    NOT_LF = /\r\n|\r/g,
    REG_INDENT_SPACE = /^([\s\u3000]+)/,

    
    //インデント分の空白を挿入
    addEnter = function (e) {
      let start;
      if (! isNaN (start = e.selectionStart)) {
        let
          value = e.value,
          region_byCaret = value.slice (0, start),
          CRLFs = region_byCaret.match (NOT_LF);
    
        if (CRLFs) {
          region_byCaret = region_byCaret.replace (NOT_LF, '\n');
          start -= CRLFs.length;
        }
        
        let
          region = region_byCaret,
          lines = region.split ('\n'),
          n = lines.length - 1,
          spc;
        
        if (0 === lines[n].length) {
          if ((spc = lines[n-1].match (REG_INDENT_SPACE))) {
            let s = spc[1];
            e.value = region_byCaret + s + value.slice (start);
            e.selectionStart = e.selectionEnd = start + s.length;
          }
        }
      }
    };


  //____________________________________
  
  class AutoIndent {
    constructor (target = { }) {
      if (target.nodeName !== 'TEXTAREA')
        throw new Error ('TEXTAREA ではありません');

      this.target = target;
      this.disabled = false;
      
      target.addEventListener ('keyup', this, false);
    }
    
    
    handleEvent ({key}) {
      if (! this.disabled)
        if ('Enter' === key)
          addEnter (this.target);
    }
    
    
    addEnter () {
      if (! this.disabled)
        addEnter (this.target);
    }
  }
  
  this.AutoIndent = AutoIndent;
}

new AutoIndent (document.getElementById('B'));

</script>

Change Event を遅延させて発火させる

JavaScript

Event(input) を利用して、文字の連続入力が終了したら、一定時間後に change イベントを発火させます

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">

<body>
<h1>Input 要素の change イベントを遅延させて発火させる</h1>
<p><input id="A"></p>

<script>

{
  // input イベントを監視して、変更があったら change イベントを発火させる
  
  class delayChangeEvent {
    constructor (target, delayTime = 300, cbFunc = null) {
      if (! target)
        throw new Error ('要素がありません');

      this.target = target;
      this.delay  = delayTime; //遅延時間(ms)
      this.cbFunc = cbFunc; //その時に実行する関数
      this.disabled = false; //この値を true にすると実行されなくなる
      this.timeId   = null; //setTimeout で使用する
      this.value    = target.value;
      
      // input event を監視する
      target.addEventListener ('input', this, false);
    }
    
    
    //イベントハンドラ
    handleEvent (event) {
      if (! this.disabled) {
        switch (event.type) {
        
        //input event を監視する
        case 'input' :
          if (this.timerId)
            clearTimeout (this.timerId);//タイマーを解除
          this.timerId = setTimeout (this.execute.bind (this), this.delay);//タイマー設定
          break;
        }
      }
    }
    

    //change イベントを発火させる
    execute () {
      if (! this.disabled) {
        this.timerId = null;
        if (this.value !== this.target.value) {

          let
            e = this.target,
            event = e.ownerDocument.createEvent ('HTMLEvents');
          
          event.initEvent ('change', true, true);

          //change イベントの前に コールバックを実行する
          if ('function' === typeof this.cbFunc)
            this.cbFunc (this.target);

          e.dispatchEvent (event);
  
        }
      }
    }
  }
  
  this.delayChangeEvent = delayChangeEvent;
}


function hoge (e) {
  //先頭の空白削除と2文字以上続く空白は1文字の空白とする
  e.value = e.value.replace (/^(\s*)|\s+(?=\s)/g, '');
}


let a = document.getElementById('A');
//a.addEventListener ('change', hoge, false);

new delayChangeEvent (a, 400, hoge);


</script>

Kindle paperwhite ブラウザ（体験版）の HTML を画面右をクリックすることでスクロールさせる (javascript で scroll)

Kindle Kindle

右端のクリックは良いのだけれど、左端では微妙に戻れない。研究の余地あり。
というか、スクロールの指定ぐらい実装しろよ！ > amazon !!
ページ内のリンクもOK!!
TreeWalker オブジェクトも使えるので、そちらに切り替えようか？
それにしてもこの中途半端な Javascript 頭にくる！
イライラ。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 1em;
  font-size: 230%;
  width: 700px;
  line-height:300%;
}
div {
  border:4px black doubel;
}

</style>

<body>

<div id="A">
  <h1>A</h1>
  <ol>
    <li>1abc
    <li>2abc
    <li>3abc
    <li>4<a href="#B">B</a>
    <li>5abc
    <li>6abc
    <li>7abc
    <li>8abc
    <li>9abc
    <li>10abc
    <li>11abc
    <li>12abc
    <li>13abc
    <li>14abc
  </ol>
</div>


<div id="B">
  <h1>B</h1>
  <ol>
    <li>BBBBBBBBBB0<span id="Z">ZZZZZZZZZ</span>
    <li><a href="#C">C</a>
    <li>BBBBBBBBBB1
    <li>BBBBBBBBBB2
    <li>BBBBBBBBBB3
    <li>BBBBBBBBBB4
    <li>BBBBBBBBBB5
    <li>BBBBBBBBBB6
    <li>BBBBBBBBBB7
    <li>BBBBBBBBBB8
  </ol>
</div>


<div id="C">
  <h1>C</h1>
  <table border="1" class="fix">
    <tr>
      <td><a href="#A">A</a>
      <td><a href="#B">B</a>
      <td><a href="#C">C</a>
      <td><a href="#D">D</a>
    <tr>
      <td colspan="8">f
  </table>
</div>


<div id="D">
  <h1>D</h1>
  <a href="#A">A</a>
</div>
<script>

(function () {

  var SCROLL_AREA_WIDTH = 80;
  var MARGIN_BOTTOM     = 20;
  var DOCUMENT_ROOT     = document.body;

  //_______


  function basicFormat (e) {
    switch (e.nodeName) {
    case 'LI' :     return 'list-item';
    case 'TABLE':   return 'table';
    case 'CAPTION': return 'table-caption';
    case 'THEAD':   return 'table-header-group';
    case 'TFOOT':   return 'table-footer-group';
    case 'TBODY':   return 'table-row-group';
    case 'TR':      return 'table-row';
    case 'TD': case 'TH' : return 'table-cell';

    case 'RUBY':    return 'ruby';
    case 'RB':      return 'ruby-base';
    case 'RT':      return 'ruby-text';
    case 'RBC':     return 'ruby-base-container';
    case 'RTC':     return 'ruby-text-container';
    
    case 'SCRIPT' : return 'none';
    
    case 'A' : case 'ABBR' : case 'ACRONYM' : case 'B' : case 'BDO' :
    case 'BIG' : case 'BR' : case 'BUTTON' : case 'CITE' : case 'CODE' :
    case 'DFN' : case 'EM' : case 'I' : case 'IMG' : case 'INPUT' :
    case 'KBD' : case 'LABEL' : case 'MAP' : case 'OBJECT' : case 'Q' :
    case 'SAMP' : case 'SELECT' : case 'SMALL' : case 'SPAN' : case 'STRONG' :
    case 'SUB' : case 'SUP' : case 'TEXTAREA' : case 'TIME' : case 'TT' :
    case 'VAR' : return 'inline';
     
    default :
      return 'block';
    }
  }


  //前方の要素を非表示にする(兄要素の子孫は無視&直系の祖先も無視)
  function hide_previous (e) {
    var n;
    while (e) {
      if (n = e.previousElementSibling) {
        n.style.display = 'none';
        e = n;
      } else {
        e = e.parentNode;
        if (DOCUMENT_ROOT === e)
          break;
      }
    }
  }
  
  
  //後方の要素を非表示にする(弟要素の子孫は無視&直系の祖先も無視)
  function hide_next (e) {
    var n;
    while (e) {
      if (n = e.nextElementSibling) {
        n.style.display = 'none';
        e = n;
      } else {
        e = e.parentNode;
        if (DOCUMENT_ROOT === e)
          break
      }
    }
  }


  //直系の祖先を表示する
  function display_directAncestor (e) {
    while (e) {
      e.style.display = basicFormat (e);
      e = e.parentNode;
      if (DOCUMENT_ROOT === e) break; //body まで遡って見えていなとは？
    }
  }



  //子要素も探る
  function getNextElement (e) {
    var n;
    if (n = e.firstElementChild ) return n;
    do {
      if (DOCUMENT_ROOT === e) break;
      if (n = e.nextElementSibling) return n;
    } while (e = e.parentNode);
    return null;
  }


   //子要素も探る
   function getPrevElement (e) {
    var n, m, p;
    if (n = e.previousElementSibling) {
      while (m = n.lastElementChild) {
        n = m;
      }
      return n;
    }
    p = e.parentNode;
    return DOCUMENT_ROOT === p ? null: p;
  }

 



  

  function getHeight (e) {
    e.style.visibility = 'hidden';
    e.style.display = 'block';
    var rect = e.getBoundingClientRect ();
    var h = rect.top;
    e.style.display = 'none';
    e.style.visibility = 'visible';
    return h;
  }


  
  
  //__________________________________________________
  
  function Scroller () {
    this.root   = document;
    this.height = document.documentElement.clientHeight - MARGIN_BOTTOM;
    this.width  = document.documentElement.clientWidth - SCROLL_AREA_WIDTH
    this.first  = document.body.firstElementChild;//表示されている最初の要素
    this.last   = null;//表示されている最後の要素
    
    document.addEventListener ('click', this, false);
    window.addEventListener ('hashchange', this, false);//location.hashを監視

    this.disp (this.first);
  }
  
  
  function scrollUp () {
    this.disp (this.first, true);
  }
  
  
  function scrollDown () {
    this.disp (this.last);
  }
  
  
  
  
  //要素を基準に下へ向かって高さがエリア内なら表示し、エリア外は非表示
  function disp (e, direction) {
    if ('undefined' === typeof e)
      return;
    if ('undefined' === typeof direction)
      direction = false;
    
    var height = this.height, h, b, r;


    //下から表示
    if (direction) {
      e = getPrevElement (e);
      hide_next (e);
      display_directAncestor (e);
      this.last = b = e;

      while (e) {
        e.style.visibility = 'hidden';
        e.style.display = basicFormat (e);
        r = b.getBoundingClientRect ();
        h = r.top;
        if (height < h) {
          e.style.display = 'none';
          e.style.visibility = 'visible';
          
          hide_previous (e);
          this.first = e;
          return;
        }
        e.style.display = basicFormat (e);
        e.style.visibility = 'visible';
        
        e = getPrevElement (e);

      }
      this.first = document.body.firstElementChild;
    }

    //上の要素から表示
    else {

      hide_previous (e);
      display_directAncestor (e);
      this.first = e;

      while (e) {
        if (getHeight (e) < height) {
          e.style.display = basicFormat (e);
        }
        else {
          this.last = e;
          hide_next (e);
          break;
        }
        e = getNextElement (e)
      }//子要素も含めて探す

    }
  }

    
  //イベント処理
  function handleEvent (event) {
    var x = event.pageX;
    var wd = this.width;
    
    switch (event.type) {

    case 'click' : //クリック処理
      if (x < SCROLL_AREA_WIDTH)
        this.scrollUp ();
      else
        if (x > wd) this.scrollDown ();
      break;

    
    case 'hashchange' ://ページ内リンクなら
      var
        hash = location.hash,
        target;
      
      if (0 === hash.indexOf ('#'))
        if (target = document.querySelector (hash))
          this.disp (target);

      break;
    }
  }

  //__

  Scroller.prototype.disp        = disp;
  Scroller.prototype.scrollUp    = scrollUp;
  Scroller.prototype.scrollDown  = scrollDown;
  Scroller.prototype.handleEvent = handleEvent;
  
  //__
  
  this.Scroller = Scroller;

}) ();

//s. disp ();
/*
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);
*/

//var isKindle = /^Mozilla.+Linux.+AppleWebKit.+KHTML.+Safari.+/;
//if (isKindle.test(window.navigator.userAgent));
  new Scroller ();

</script>
</body>
</html>

Kindle paperwhite 使いこなそうと思ったが、Javascriptからは微妙だぞこれ！

Kindle paperwhite

反応が悪いが click イベントで画面の両端を触れたことを認知するっことはできた。
しかしページ内でのリンクが機能しない！
eindow.moveTo は、効かない。今の所スクロールする手立てがない。
唯一方法としては、クリックイベントをハックして、そのキーが押されたらそれに対応する部分だけを表示して切り替える方法しか思いつかない。

  • -

ふと思いついたこと。

    • ページ内リンクで指定された要素を基準に、その兄（親）方向の要素を非表示にする。
    • 基準となる要素から子（弟）要素をたどりその要素（ブロック型）の高さを取得する。
    • ページの高さから減算しページに収まる範囲まで表示し、それ以降は非表示にする。

さぁ誰か考えてっくれ！

    • display:none の状態だと、clientHeight は取得できない。
    • 一度 none にしたとして、全てを block で戻すわけにはいかない。記憶しておかなければならない。
    • inline 型と block型の見極めはどうするか？

とにかくスクリプトが遅い。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 30px;
  font-size: 300%;
  width: 700px;
}
div {
  height:500px;
  border:4px black doubel;
  display: none;
}
</style>

<body>
<table border="1">
<tr>
  <td>A <td>B <td>C <td>D
  <td><a href="#A">A</a>
  <td><a href="#B">B</a>
  <td><a href="#C">C</a>
  <td><a href="#D">D</a>
<tr>
  <td colspan="8">f
</table>

<div id="A">
<h1>A</h1>

</div>


<div id="B">
<h1>B</h1>

</div>
<div id="C">
<h1>C</h1>

</div>
<div id="D">
<h1>D</h1>

</div>
<script>
var t=document.querySelector('table');

function handler (event) {
  var e = event.target, tx,mess='';

  var x = event.pageX;
  var L_area = 100;
  var R_area = 1072 - L_area;
  var lr = x < L_area ? -1: R_area < x ? 1 : 0;//みぎか左かの判定結果

  if ('TD' === e.nodeName) {
    tx = e.textContent.trim();
  
    var div = document.querySelectorAll ('div');
    for (var d, i= 0; d = div[i]; i++) {
      d.style.display = (d.id==tx) ? 'block': 'none';
      if (d.id==tx) {
        mess = d.clientHeight;
      }
    }
    t.rows[1].cells[0].textContent = tx + mess;
  }
  if ('A' === e.nodeName) {
    tx = e.textContent.trim();
    t.rows[1].cells[0].textContent = tx;
    var div = document.querySelectorAll ('div');
    for (var d, i= 0; d = div[i]; i++) {
      d.style.display = (d.id==tx) ? 'block': 'none';
      if (d.id==tx) {
        mess = d.clientHeight;
      }
    }
    t.rows[1].cells[0].textContent = tx + mess;
  }

}
document.addEventListener ('click', handler, false);
</script>
</body>
</html>

書きかけ中、Kindle では試していなけれどページ内リンクは動くかも？

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 30px;
  font-size: 230%;
  width: 700px;
  line-height:300%;
}
div {
  border:4px black doubel;
//  display: none;
}

</style>

<body>

<div id="A">
<h1>A</h1>
<ol>
  <li>1abc
  <li>2abc
  <li>3abc
  <li>4<a href="#B">B</a>
  <li>5abc
  <li>6abc
  <li>7abc
  <li>8abc
  <li>9abc
  <li>10abc
  <li>11abc
  <li>12abc
  <li>13abc
  <li>14abc
</ol>
</div>

<div id="B">
<h1>B</h1>
<ol>
  <li>BBBBBBBBBB<span id="Z">ZZZZZZZZZ</span>
  <li><a href="#C">C</a>
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
</ol>
</div>
<div id="C">
<h1>C</h1>
<table border="1" class="fix">
<tr>
  <td><a href="#A">A</a>
  <td><a href="#B">B</a>
  <td><a href="#C">C</a>
  <td><a href="#D">D</a>
<tr>
  <td colspan="8">f
</table>

</div>
<div id="D">
<h1>D</h1>
<a href="#A">A</a>
</div>
<script>

(function () {
  var SCROLL_AREA_WIDTH = 100;
  var buffer_e = [ ], buffer_d = [ ];


  function getNext (e) {
    var n;
    if (n = e.firstElementChild ) return n;
    do {
      if (n = e.nextElementSibling) return n;
    } while (e = e.parentNode);
    return null;
  }



  function getPrev2 (e) {
    var n, m;
    if (n = e.previousElementSibling) {
      while (m = n.lastElementChild)
        n = m;
      return n;
    }
    return e.parentNode;
  }

  
  function getPrev (e) {//兄要素の子は探らないで親へ
    return e.previousElementSibling || e.parentNode;
  }

  

  //前方の要素を非表示にする
  function hidePrev (e) {
    var p = e.parentNode;

    while (e = getPrev (e)) {
      if ('HTML' === e.nodeName) break;
      if (p == e) {
        e.style.display = 'block';
        p = p.parentNode;
        continue;
      }

      var v = getComputedStyle (e, '').display;
      buffer_e.push (e);
      buffer_d.push (v);
      e.style.display = 'none';
    }
  }


  function getPrevIsNotInline (e) {
    do {
      var v = getComputedStyle (e, '').display;
      if ('inline' !== v)
        break;
      e = e.parentNode;//親がブロック要素まで inline では？
    } while (e = getPrev (e));
    return e;
  }



  function hideNext (e) {
    while (e = getNext (e)) {
      if ('HTML' === e.nodeName) break;
      if ('SCRIPT' === e.nodeName) continue;
      
      var v = getComputedStyle (e, '').display;
      buffer_e.push (e);
      buffer_d.push (v);
      e.style.display = 'none';
    }
  }
  
  //__________________________________________________
  
  function Scroller () {
    this.root   = document;
    this.height = document.documentElement.clientHeight;
    this.first  = getNext(document.body);//表示されている最初の要素
    this.last   = null;//表示されている最後の要素
    
    document.addEventListener ('click', this, false);
    this.disp (this.first);
  }
  
  
  function scrollUp () {
    this.disp ();
  }
  
  
  function scrollDown () {
    this.disp (this.last);
  }
  
  
  function getHeight (e) {
    e.style.visibility = 'hidden';
    e.style.display = 'block';
    var h = e.getBoundingClientRect ().top;
    e.style.display = 'none';
    e.style.visibility = 'visible';
    return h;
  }
  
  
  function disp (e) {
    if ('undefined' === typeof e)
      return;
    
    var height = this.height, h;
    hidePrev (e);
    this.first = e;

    do {
      if ('SCRIPT' === e.nodeName) continue;
      if (getHeight (e) < height) {
        e.style.display = 'block';
      }
    
      else {
        this.last = e;
        console.log(e);
        hideNext (e);
        break;
      }
    } while (e = getNext (e));
    
  }

  
  
  //イベント処理
  function handleEvent (event) {
    var target = event.target;
    var doc = target.ownerDocument;
    var xp = event.pageX, LR = 0;
    var sw = this.root.documentElement.clientWidth - SCROLL_AREA_WIDTH;
    var href;
    
    //クリック処理
    if ('click' === event.type) {
      //ページ内リンク処理
      if ('A' === target.nodeName) {
        if (href = target.getAttribute('href')) {
          if (0 === href.indexOf ('#')) {
            this.disp (doc.querySelector (href));
            event.preventDefault ();
          }
        }
      }
      //画面の左右クリックでスクロール処理
      else {
        if (xp < SCROLL_AREA_WIDTH) this.scrollUp ();
        if (xp > sw) this.scrollDown ();
      }
    }
  }

  //__

  Scroller.prototype.disp      = disp;
  Scroller.prototype.scrollUp    = scrollUp;
  Scroller.prototype.scrollDown  = scrollDown;
  Scroller.prototype.handleEvent = handleEvent;
  
  //__
  
  this.Scroller = Scroller;

}) ();

//s. disp ();

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);

var isKindle = /^Mozilla.+Linux.+AppleWebKit.+KHTML.+Safari.+/;
if (isKindle.test(window.navigator.userAgent));
  new Scroller ();

</script>
</body>
</html>

Amazon タイムセールで Kindle Paperwhite を買う。そしてきっちり Kindle を使いこなそう！

Kindle

まずは Javascript を中心に調べる

    • alert は使えるが、 console.log は使えない
    • var は使えるが let が使えない
    • touchイベントが使えない click なら反応する

HTMLで気になっていること

    • p タグに　white-space: pre ; が効いているのか、テキストの改行がそのまま反映されている
    • a タグでページ内リンクでページ移動ができない！スクリプトからも移動ができない。ひたすらスクロールか？！

画面のサイズ関係を取得する(body { margin: 0 30px })

screen.width 1072
screen.height 1448
screen.availWidth 1072
screen.availHeight 1448
window.innerWidth 0
window.innerHeight 0
window.outerWidth 1072
window.outerHeight 1284
document.width 1072
document.height 1268
document.body.clientWidth 1012
document.body.clientHeight 760
document.documentElement.clientWidth 1072
document.documentElement.clientHeight 1268

ちょっと待て！スクロール関係の数値は0を返しているけど、まずいぞこれ！どこにいても0を返す

<!DOCTYPE html>

<html lang="ja">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kindle</title>

<style>
body {
  margin: 0 30px;
  font-size: 100%;
}
table {
  width: 100%;
}

@media screen and (max-width:1072px) {
  body {
//    background: black;
//    color: white;
  }
  
  
}
</style>
<body>
<h1>Kindle Paperwhite</h1>
<table border="1" id="T">
	<tr>
    <th>説明
    <th>取得項目
    <th>値

  <tr>
    <th rowspan="2">モニターの解像度
    <td>screen.width
    <td>
  <tr>
    <td>screen.height
    <td>

  <tr>
    <th rowspan="2">モニターの利用可能領域
    <td>screen.availWidth
    <td>
  <tr>
    <td>screen.availHeight
    <td>
  
  <tr>
    <th rowspan="2">ウィンドウビューポート<br>（スクロールバーを含む）
    <td>window.innerWidth
    <td>
  <tr>
    <td>window.innerHeight
    <td>

  <tr>
    <th rowspan="2">ウィンドウ外観
    <td>window.outerWidth
    <td>
  <tr>
    <td>window.outerHeight
    <td>

  <tr>
    <th rowspan="2">Document
    <td>document.width
    <td>
  <tr>
    <td>document.height
    <td>

  <tr>
    <th rowspan="2">ドキュメント全体
    <td>document.body.clientWidth
    <td>
  <tr>
    <td>document.body.clientHeight
    <td>

  <tr>
    <th rowspan="2">ドキュメントの表示領域
    <td>document.documentElement.clientWidth
    <td>
  <tr>
    <td>document.documentElement.clientHeight
    <td>

  <tr>
    <th rowspan="6">スクロール量
    <td>window.scrollX
    <td>
  <tr>
    <td>window.scrollY
    <td>

  <tr>
    <td>document.body.scrollLeft
    <td>
  <tr>
    <td>document.body.scrollTop
    <td>

  <tr>
    <td>document.documentElement.scrollLeft
    <td>
  <tr>
    <td>document.documentElement.scrollTop
    <td>
</table>
<script>
var t = document.querySelector('table');

t.rows[1].cells[2].textContent = screen.width;
t.rows[2].cells[1].textContent = screen.height;
t.rows[3].cells[2].textContent = screen.availWidth;
t.rows[4].cells[1].textContent = screen.availHeight;
t.rows[5].cells[2].textContent = window.innerWidth;
t.rows[6].cells[1].textContent = window.innerHeight;
t.rows[7].cells[2].textContent = window.outerWidth;
t.rows[8].cells[1].textContent = window.outerHeight;
t.rows[9].cells[2].textContent = document.width;
t.rows[10].cells[1].textContent = document.height;
t.rows[11].cells[2].textContent = document.body.clientWidth;
t.rows[12].cells[1].textContent = document.body.clientHeight;
t.rows[13].cells[2].textContent = document.documentElement.clientWidth;
t.rows[14].cells[1].textContent = document.documentElement.clientHeight;
t.rows[15].cells[2].textContent = window.scrollX;
t.rows[16].cells[1].textContent = window.scrollY;

t.rows[17].cells[1].textContent = document.body.scrollLeft;
t.rows[18].cells[1].textContent = document.body.scrollTop;
t.rows[19].cells[1].textContent = document.documentElement.scrollLeft;
t.rows[20].cells[1].textContent = document.documentElement.scrollTop;

</script>

metaタグ viewport の指定

標準の状態だと文字が小さい感じ

<meta name="viewport" content="width=device-width">

ちょっと大きくして見ようと試みるも無視されるようだ。拡大もできない。
body { font-size: 150%; }ととかか？

<meta name="viewport" content="width=640,initial-scale=2">