SQLの窓

2012年05月04日


おくればせながら、スマートフォン(検証はiPhone)に対応しました

通常 PC の表示をそのままに、Seesaa のスマートフォンページと、スマートフォンからPC ページを表示した時に、実際に見やすいように最適化しました。その為、スマートフォンから見た場合、PC ページでも右サイドは表示されません。横向けで見ると無理なく文字が見えるものと思われます。

右端に余裕があるのは、AssistiveTouch 用で、この余裕の部分を使っていずれ自前のコントロールも作ろうかと。





スマートフォンページの場合は、画像を幅 290px に変更して表示するようにしました。また、スマートフォンページでも SyntaxHighlighter が表示できるようにしています。





( Android はまだチェックしていません )

当ブログでは、SyntaxHighlighter を使っている事もあり、PRE を多用している為、改行されずにはみ出る事がスマートフォンで見られましたが、いずれにせよ以下のコードで対応できるようです。
pre {
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}

PC 側には以下のようなコードを使用しています

<script type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str="";
		str+="<style type=\"text/css\"> \n";
		str+=" \n";
		str+=".iphide { \n";
		str+="	display:none; \n";
		str+="} \n";
		str+="#links { \n";
		str+="	display:none; \n";
		str+="} \n";
		str+="#container { \n";
		str+="	width:940px!important; \n";
		str+="} \n";
		str+="#content { \n";
		str+="	width:930px!important; \n";
		str+="} \n";
		str+=".text pre { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=".text div { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=" \n";
		str+="</style> ";
		document.write(str);
	}

</script>

スマートフォン側はには以下のようなコードを使用しています

<script type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str="";
		str+="<style type=\"text/css\"> \n";
		str+=" \n";
		str+=".iphone { \n";
		str+="	width:290px!important; \n";
		str+="} \n";
		str+=".text img { \n";
		str+="	width:290px!important; \n";
		str+="} \n";
		str+=".text pre { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=".text div { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=" \n";
		str+="</style> ";
		document.write(str);
	}

</script>


【記録の最新記事】
posted by lightbox at 2012-05-04 01:18 | 記録 | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり