I.
Viewportでスマートフォン用に横幅を最適化
| |
Viewportメタタグを<head>...
...</head>内に記述（こちらを参照）
|
|
| |
<!--viewportの指定（ここの設定を変えてみる）-->
<meta name="viewport"
content="width=device-width"
/>
<!--/viewportの指定-->
|
|
| |
＝成績＝
Androidブラウザの場合
|
| |
| |
サイトの横幅が640px以下の場合には、横表示ではデバイスの横幅に合わせて表示する事が可能だ。一方、640px以上の場合にはフィットせず640pxより大きい部分は右にはみ出て表示されてしまう。
縦表示では、320pxを超える右側の箇所が非表示となってしまう・・・
Androidでは横幅を320pxで作成しないと、 別の方策でもダメだ
(>_<、) |
|
| |
iPhone Safariの場合
|
| |
| |
横表示でも縦表示でも、指定した横幅に完全フィットして表示可能な親切設計になっている。
但し、Flash入りのサイトの縦表示では上手く作動しない。
|
|
|
II.
iPhoneのSafari用に文字サイズを最適化
| |
iPhoneのSafariで、PC用に作成した既存の当サイトをサイズのみを縮小して視聴したら、意図した文字サイズで表現出来なかった。一つのページで、ある領域の文字が巨大(サブタイトル部)又は極小(図の説明部)に表示されてしまう等ハチャメチャだった。そこで、 こちらの記事を参考に以下1)～3)の対策に、ヒビヅレさんの 対応方法
4)を追加した。
1)サイトの横幅は原則 640pxで、横向きを想定したデザイン
2)フォントサイズは10px以上の偶数のみ・・・ 別途、.moji14pt
{ font-size: 14px}などを記述したmoji.cssを作成
3)フォントにはMacの「ヒラギノ角ゴ W3」が推奨されているので、今回は
font-familyにヒラギノ角ゴ Pro W3も記述
4) iPhoneが自動でフォントサイズを調整してしまうと云うお節介な機能を解除する為に、
CSSのbodyに -webkit-text-size-adjust:
none; を記述
＝以下は3),4)を記述したcommon.css 例＝ |
|
| |
@charset "Shift_JIS";
body {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ
Pro W3", "Hiragino
Kaku Gothic Pro", Verdana,
Osaka,"ＭＳ Ｐゴシック", "MS PGothic", Arial,
sans-serif;
-webkit-text-size-adjust:
none; /* フォントサイズ自動調整を解除 */
}
|
|
| |
＝成績＝
諦めかけていたが・・・解決、ヒビヅレさんに感謝 ＼(^o^)／
なお iPhoneのSafariは、孤立した文字
| Kenのムービー計画へ > ムービー鑑賞導入コーナーへ
|は 左寄せ表示となってしまうので、孤立させないよう調整が必要だった。
|
|
| |
<script
type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){ if (window.pageYOffset
=== 0) { window.scrollTo(0,1);
} }
window.onload = function()
{ setTimeout(doScroll, 100);
}
</script>
|
| |
＝成績＝
1) <body ...>内に onLoad="...;"が有ると作動しない(補足で対処)
2)
Androidブラウザ：メニューページの切り替えで交互に：2回に1回は作動しない
?(゜_。)?
3)
iPhone Safariでは、
|
| |
| |
・この処理をすると、別のページから当ページ内のリンク先(アンカーポイント)に飛んでくれなくなってしまう・・・<a
name=”02″ id=”02″>■</a>でも対処出来ない
Y (>_<、)Y
・Flashビデオが読み込めないページの縦表示では上手く作動しない。
|
|
| |
＜補足＞
|
| |
| |
|
| |
<script
type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){
if (window.pageYOffset
=== 0) { window.scrollTo(0,1);
} }
addOnload(function()
{ setTimeout(doScroll,
100); });
// onloadイベントを追加する。
function addOnload(func)
{
try {
window.addEventListener("load",
func, false);
} catch (e) {
// IE用
window.attachEvent("onload",
func);
}
}
</script>
|
|
|
| |
現時点でのAndroidは、HTML5のvideoタグのautoplay属性の指定を無視するように実装されています。
これを敢えて回避する方策として、playする前にloadするJavascript
を <head> </head>内に記述しておく方法がある（ こちらの参考ページから引用）。 <script type="text/javascript">
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
}; </script> そして、VideoタグにIDを定義して <video id="myVideo"
src=... controls autoplay>
と記述する
|
| |
＜補足＞
|
| |
| |
|
| |
<script
type="text/javascript">
addOnload(function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
});
// onloadイベントを追加する。
function addOnload(func)
{
try {
window.addEventListener("load",
func, false);
} catch (e) {
// IE用
window.attachEvent("onload",
func);
}
}
</script>
|
|
| |
＝成績＝
1) ビデオの再生開始が遅延して、ページジャンプの指定時間よりもビデオの終了が遅れると、自動でプレイヤーを閉じる事が出来なくなってしまう。従って、余裕を持ってジャンプ迄の時間を指定する必要がある。
2) iPhone(iOS 5.1)のSafariでは作動しない。
3) Android
2.3のOpera Mobile12では自動再生させる事が出来ない・・・早期にスタートボタンをタップしないと再生出来なくなってしまう不都合が発生する場合がある
┓(´_`)┏
4)Android
4.0標準ブラウザでは自動再生させる事が出来なくなってしまった。Chrome
18も作動しない。
なお、Opera Mobile12はautoplayに対応した。
|
|
|
スマホは横画面専用ページ＝
