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

携帯電話向けウェブページ作成のヒント
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル 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)

推薦する

Linux は、ディレクトリが存在するかどうかを判断するために if を使用します。

Linux で if を使用してディレクトリが存在するかどうかを判断する方法方法は次のとおりです。...

Easyswoole ワンクリック インストール スクリプトとパゴダ インストール エラー

よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...

rpm を使用して指定されたバージョンの docker (1.12.6) をインストールする詳細な手順

1. 理由システムが Centos7.3 の場合、yum install docker を使用して直...

Vue命令の動作原理と実装方法

Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...

フィルターと固定間の競合の原因と解決策の詳細な説明

問題の説明body内でfilter属性を使用すると、 fixed要素の位置が不正確になります。つまり...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

Dockerプライベートウェアハウスの構築とインターフェース管理の詳細な説明

1. レジストリについて公式 Docker ハブは、パブリックイメージを管理するのに適した場所です。...

Nginx インストールの詳細なチュートリアル

1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...

2つのLinuxサーバー間でファイルとフォルダを転送する手順

今日、私はプロジェクトの移行の問題に取り組んでいましたが、突然、大量の写真をどうやって移動したらよい...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...

Docker クロスホストネットワークの実装 (手動)

1. Macvlan の紹介Macvlan が登場する前は、イーサネット カードに複数の IP ア...

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

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

小規模プログラムへのデータキャッシュ機構の応用と実装

ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...