レス数:2 / 状態:未解決 / No:135 / ATOM
1
日付:2014/01/29(水)03:02:07
ID:9Iqa3n3sbwcP
「AS3でHTMLを使い Javascriptを動作させる」の質問をした者です。
Adobe Air を使いHTMLを表示させ 広告を表示させるのに無事成功しました。
しかし、画面の大きさを 大きくしても 小さくしても表示する広告の大きさはそのままです。
携帯で表示する時に、ＨＴＭＬの範囲に入りきらなくて困っています。
HTML内に表示するコンテンツを解像度に合わせて 小さく表示させる事は可能でしょうか？
ちなみに、フォントの大きさだけ無く 全体の情報を同時に小さくする方法を知りたいです。
（画像、文字、スクリプトの内容等含めて全て）
どうかよろしくお願いします。
（使用するJavascriptは、仮の物が書かれています。）
stage.scaleMode = StageScaleMode.SHOW_ALL;
var webView:StageWebView = new StageWebView();
webView.viewPort = new Rectangle( -20, -2, 520, 116);
webView.stage = this.stage;
var htmlString:String =
"<!DOCTYPE HTML>" +
"<html><body>" +
"<script type=\"text/javascript\">" +
"var data = {\"data1\":1, \"data2\":2}; </script>" +
"</body></html>";
// 出力テスト
trace(htmlString);
Adobe Air を使いHTMLを表示させ 広告を表示させるのに無事成功しました。
しかし、画面の大きさを 大きくしても 小さくしても表示する広告の大きさはそのままです。
携帯で表示する時に、ＨＴＭＬの範囲に入りきらなくて困っています。
HTML内に表示するコンテンツを解像度に合わせて 小さく表示させる事は可能でしょうか？
ちなみに、フォントの大きさだけ無く 全体の情報を同時に小さくする方法を知りたいです。
（画像、文字、スクリプトの内容等含めて全て）
どうかよろしくお願いします。
（使用するJavascriptは、仮の物が書かれています。）
stage.scaleMode = StageScaleMode.SHOW_ALL;
var webView:StageWebView = new StageWebView();
webView.viewPort = new Rectangle( -20, -2, 520, 116);
webView.stage = this.stage;
var htmlString:String =
"<!DOCTYPE HTML>" +
"<html><body>" +
"<script type=\"text/javascript\">" +
"var data = {\"data1\":1, \"data2\":2}; </script>" +
"</body></html>";
// 出力テスト
trace(htmlString);
2
日付:2014/01/31(金)03:03:43
ID:uqGvQ4UrzKin
StageWebView クラスには、見当たらないですね。
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html
HTMLLoader クラスなら、表示オブジェクトの一種なので、拡大縮小が可能です。
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/html/HTMLLoader.html
CSS3 の transform に対応している場合、HTML 内で実現する事もできます。
------------------------------------------------------------------------------------------------
<html>
<body>
<div id="container" style="width:400px; height:100px; border:5px solid #000;">
あいうえお
</div>
<script type="text/javascript">
<!--
// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
var b = document_obj.body;
var r = document_obj.documentElement;
var w = b.clientWidth;
var h;
if(w < r.clientWidth)w = r.clientWidth;
if(document_obj.compatMode == "BackCompat"){
h = b.clientHeight;
}else{
if(r.clientHeight){
h = r.clientHeight;
}else{
h = b.clientHeight;
}
}
return {
width :w,
height:h
};
}
// --------------------------------------------------------------------------------
// ID 名が "container" となる要素を取得する
// --------------------------------------------------------------------------------
var element = document.getElementById("container");
var element_css_text = element.style.cssText;
var bounding_size = element.getBoundingClientRect();
var element_width = bounding_size.right - bounding_size.left;
var element_height = bounding_size.bottom - bounding_size.top;
// --------------------------------------------------------------------------------
// リサイズされるたびに実行されるイベント
// --------------------------------------------------------------------------------
window.onresize = function(){
var client_size = DocumentGetClientSize(document);
var scale = client_size.width / element_width;
var pos_x = element_width * (scale - 1.0) / 2;
var pos_y = element_height * (scale - 1.0) / 2;
var matrix = "matrix(" + (scale) + ",0,0," + (scale) + "," + (pos_x) + ","+ (pos_y) + ");";
element.style.cssText = element_css_text +
" position:absolute; top:0px; left:0px;"+
" transform:" + matrix + ";" +
" -webkit-transform:" + matrix +
" -moz-transform:" + matrix +
" -o-transform:" + matrix +
" -ms-transform:" + matrix;
};
window.onresize();
//-->
</script>
</body>
</html>
------------------------------------------------------------------------------------------------
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html
HTMLLoader クラスなら、表示オブジェクトの一種なので、拡大縮小が可能です。
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/html/HTMLLoader.html
CSS3 の transform に対応している場合、HTML 内で実現する事もできます。
------------------------------------------------------------------------------------------------
<html>
<body>
<div id="container" style="width:400px; height:100px; border:5px solid #000;">
あいうえお
</div>
<script type="text/javascript">
<!--
// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
var b = document_obj.body;
var r = document_obj.documentElement;
var w = b.clientWidth;
var h;
if(w < r.clientWidth)w = r.clientWidth;
if(document_obj.compatMode == "BackCompat"){
h = b.clientHeight;
}else{
if(r.clientHeight){
h = r.clientHeight;
}else{
h = b.clientHeight;
}
}
return {
width :w,
height:h
};
}
// --------------------------------------------------------------------------------
// ID 名が "container" となる要素を取得する
// --------------------------------------------------------------------------------
var element = document.getElementById("container");
var element_css_text = element.style.cssText;
var bounding_size = element.getBoundingClientRect();
var element_width = bounding_size.right - bounding_size.left;
var element_height = bounding_size.bottom - bounding_size.top;
// --------------------------------------------------------------------------------
// リサイズされるたびに実行されるイベント
// --------------------------------------------------------------------------------
window.onresize = function(){
var client_size = DocumentGetClientSize(document);
var scale = client_size.width / element_width;
var pos_x = element_width * (scale - 1.0) / 2;
var pos_y = element_height * (scale - 1.0) / 2;
var matrix = "matrix(" + (scale) + ",0,0," + (scale) + "," + (pos_x) + ","+ (pos_y) + ");";
element.style.cssText = element_css_text +
" position:absolute; top:0px; left:0px;"+
" transform:" + matrix + ";" +
" -webkit-transform:" + matrix +
" -moz-transform:" + matrix +
" -o-transform:" + matrix +
" -ms-transform:" + matrix;
};
window.onresize();
//-->
</script>
</body>
</html>
------------------------------------------------------------------------------------------------
このスレッドについて
| 質問の状態 : | 未解決 |
| 投稿開始日 : | 2014/01/29(水)03:02:07 |
| 投稿終了日 : | 2014/02/07(金)03:03:58 |
| 投稿者 : | |
| レス総数 : | 2 |
| スレッド番号 : | 135 |