携帯電話向けウェブページ作成のヒント

携帯電話向けウェブページ作成のヒント
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、通常の Web ページと基本的に同じです。

モバイル ページの幅は 240 ピクセル以内に制御するのが最適です。これにより、画面を移動せずに一連の操作を実行できるようになります。弊社のプロジェクトでは、240×420サイズの背景画像を使用しました。これには実は欠点があります。各ページの高さを 420 以内に抑えなければならず、制限を超えると見栄えが悪くなります。

普通の携帯電話もスマートフォンも js をサポートしていないようです。 <a href="javascript:history.back()"> や "alert()" などの関数はサポートされていません。また、携帯電話では「<input type="button">」のスタイルがあまりサポートされていません。幅を指定すると、同じコードでもブラウザと携帯電話では幅に一定の差が生じます。したがって、私の提案は、可能であればボタンの使用を避けることです。代わりにテキスト ハイパーリンクを使用するか、小さなアイコンの使用を検討してください。

リスト ページには、ul li や p+space ではなく、table を使用するのが最適です。これはタイプセット用であり、列内の要素が長すぎる場合は、「table tr td{word-break:break-all;}」を使用できます。他の 2 つのソリューションでは、文字列を切り捨てることしかできません。もちろん、私の観点からすると、ページの高さは固定されているので、文字列を切り捨てることは良い選択かもしれません。

大きな画像には、依然として一定の必要性があります。たとえば、ナビゲーションマップは、人々に眩しい感覚を与えることができますが、画像が大きすぎることはできず、10K 以内に制御する必要があります。当社のナビゲーションマップは、以下のようにLenovoの携帯電話に似たページを使用しています。

モバイル Web ページの詳細は、通常の Web ページよりはるかに少ない可能性があります。少なくとも、IE6、7、8 などのブラウザーを必要とせず、モバイル ページに渡すだけで済みます。ただし、見栄えを良くするには、まだ少し考慮が必要です。

<<:  Docker、Nginx、Jenkins をベースにした自動フロントエンド デプロイメント

>>:  mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

推薦する

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...

CentOS 8 に Postfix メール サーバーをインストールして設定する方法

Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...

Navicat for MySQLのスケジュールされたデータベースバックアップとデータ復旧の詳細

データベースの変更または削除操作によってデータ エラーが発生したり、データベースがクラッシュしたりす...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...

MySQL 8.0.15 のダウンロードとインストールの詳細なチュートリアルは初心者にとって必須です。

この記事では、MySQL 8.0.15をダウンロードしてインストールするための具体的な手順を参考まで...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

Linuxでのソフトウェア(ライブラリ)の更新コマンドの詳しい説明

Ubuntu サーバーにパッケージをインストールする場合、sudo apt-get install ...

Web デザインの経験: 独善的な Web デザイナー

1. ゴミかクラシックか? Web テクノロジーは急速に更新されており、Web サイトのインターフェ...

プロジェクトの再構築からプロジェクトにおける CSS3 カスタム変数の使用について話す

CSS3変数について変数を宣言するときは、変数名の前に 2 つのハイフン ( -- ) を追加します...

HTML 選択タグにおける単一選択と複数選択の詳細な説明

select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザ...

複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。

目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...