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">