HSPTV!掲示板

スマホの画面一杯の大きさで、Ｗebアプリを表示させたいのですが、
このサイズを取得する方法が分かりません。

[ginfo] の命令を使って、スマホの画面上で実行させて取得を試みても、

> #include "hsp3dish.as"
でのＷebアプリでも、

> #include "hgimg4.as"
でのＷebアプリでも、

> 320,480

の値になってしまい、取得できません。
[ginfo] 関連の命令は、ＰＣ上でのことでしか使えないのでしょうか。

どうやったら、スマホ上で取得出来るのでしょうか。

FullscreenボタンがあるのでHSP側でスマホの解像度を意識する必要がありますかね？
基本的に16:9の比率で作ればいいと思いますが

確かにそうですね。スマホ上でFullscreenにすればいい訳ですね。

ただ、縦横比を維持したままの、拡大(場合によっては縮小)の場合では、
下側、あるいは左右に空白領域が生じるのが一般です。
あるいは、縦横のサイズにぴったり合わせた形でのFullscreenの場合では、
画面内に映し出す画像の縦横比に歪みが生じます。

私がここで求めているのは、
画像に歪みを生じさせないように、スマホの縦横のサイズにぴったり合わせた形で、
Fullscreenにしたい、ということでして、
そのためにはスマホ上で、スマホの解像度を取得しないと、
画像の歪みを補正できないからです。

これは、無理なのでしょうか。
これができれば、どんな機種でも、見た目に不自然さを感じさせない、
自然な目一杯のFullscreenが可能になると思うのですが。

runWithFS()とかで取るならこの辺で
https://developer.mozilla.org/ja/docs/Web/API/Screen

ginfo_winx、ginfo_winyは、htmlファイル内で指定しているENV.HSP_WX、ENV.HSP_WYのサイズを返します。

フルスクリーンにしたい場合については、こちらも参考にしてください。と言ってもなかなかめんどくさいですが。

HSP3Dish.jsでフルスクリーン化（5）
https://mclab.uunyan.com/lab/hspneta/neta028.htm#%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E5%8C%96

スマホ表示のときに目一杯伸ばしたいなら以下のようにすれば出来るかも。

◆ HTMLを書き換え
ENV.HSP_LIMIT_STEP の後の行くらいに、以下6行を追加。

ENV.HSP_LIMIT_STEP = "15000";//ブラウザに処理を返すまでの実行ステップ数
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {  // ← 6行追加 : スマホのときだけ実行
    ENV.HSP_WX = String(window.innerWidth);
    ENV.HSP_WY = String(window.innerHeight);
    ENV.HSP_SX = ENV.HSP_WX;
    ENV.HSP_SY = ENV.HSP_WY;
}

◆ HSPスクリプト例

#include "hsp3dish.as"

// JavaScriptの変数内容を取得
exec {"
    HEAP32["}+varptr(ENV_HSP_WX)+{" >> 2] = ENV.HSP_WX;
    HEAP32["}+varptr(ENV_HSP_WY)+{" >> 2] = ENV.HSP_WY;
    HEAP32["}+varptr(ENV_HSP_SX)+{" >> 2] = ENV.HSP_SX;
    HEAP32["}+varptr(ENV_HSP_SY)+{" >> 2] = ENV.HSP_SY;
"}

*main
    redraw 0 :color 220,220,220 : boxf : color : pos 0,0
    mes "・スマホの表示領域ぴったりに初期化"
    mes ""
    mes "ENV.HSP_WX="+ ENV_HSP_WX
    mes "ENV.HSP_WY="+ ENV_HSP_WY
    mes ""
    mes "ENV.HSP_SX="+ ENV_HSP_SX
    mes "ENV.HSP_SY="+ ENV_HSP_SY
    mes ""
    mes strf("%02d:%02d:%02d",gettime(4),gettime(5),gettime(6))
    
    color 255  ; サイズ感を把握するための枠線
    line 0, 0, ENV_HSP_WX/2, 0 : line 10, 10, ENV_HSP_WX/2, 10
    line 0, 0, 0, ENV_HSP_WY/2 : line 10, 10, 10, ENV_HSP_WY/2
    line ENV_HSP_WX-1, ENV_HSP_WY-1, ENV_HSP_WX/2, ENV_HSP_WY-1 : line ENV_HSP_WX-11, ENV_HSP_WY-11, ENV_HSP_WX/2, ENV_HSP_WY-11
    line ENV_HSP_WX-1, ENV_HSP_WY-1, ENV_HSP_WX-1, ENV_HSP_WY/2 : line ENV_HSP_WX-11, ENV_HSP_WY-11, ENV_HSP_WX-11, ENV_HSP_WY/2
    
    redraw 1
    await 16
goto *main

■ HSP3Dish.js - スマホ全画面(スマホ解像度)
https://suwa.pupu.jp/HSP/sample/maxfit/maxfit1.html


ただ、やたら画面解像度が大きくなりすぎる気もします。
なので、HSP_WX は 640 等で固定して比率で引き延ばすと良いかもしれません。

◆ 横幅640で HTMLを書き換え
ENV.HSP_LIMIT_STEP の後の行くらいに、以下4行を追加。

ENV.HSP_LIMIT_STEP = "15000";//ブラウザに処理を返すまでの実行ステップ数
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {  // ← 6行追加 : スマホのときだけ実行
    ENV.HSP_WX = String(640);  // ← 横幅解像度 640 を指定
    ENV.HSP_WY = String(Math.round(window.innerHeight * parseInt(ENV.HSP_WX) / window.innerWidth));
    ENV.HSP_SX = String(window.innerWidth);
    ENV.HSP_SY = String(window.innerHeight);
}

■ HSP3Dish.js - スマホ全画面(横解像度640固定)
https://suwa.pupu.jp/HSP/sample/maxfit/maxfit2.html


上記は、基本的に縦画面を想定して書いています。
（また、システムメッセージボックスやいろんなコントロールが邪魔してぴったりサイズにならないので私の作っている ezlocal-dish-js を使ってHTML内容を調整しています。）


上記の方法で横画面に対応しようとすると、アドレスバーなどが邪魔になり縦幅が狭く残念なことになってしまいます。
一応 ezlocal-dish-js でも、なるべく目一杯使いたいと挑戦してみていますがこの方法も最善かと言われると全然そんなことないだろうと思います。よって、まだβ機能のままでいます。

■ HSP3Dish.js - ezlocal-dish-js 全画面FIT(β機能)
https://suwa.pupu.jp/HSP/ezlocal-dish-js/sample4_yoko.html

zakkiさん、GENKIさん、MIZUSHIKIさん、みなさん、有難うございます。

どなたのものも、理解するだけで、かなりの時間が必要そうで、
腰が引けてしまいますが、テストしながら、自分なりの方法を見つけたいと思います。

どうも、その度にスマホで実際に実行しないと、実感できないので、
はなはだ時間がかかります。
この時点で、一旦解決としておいてもいいような気もしますが、
やはり、まだにしておきます。