モバイルウェブサイトの開発に関するいくつかの結論

モバイルウェブサイトの開発に関するいくつかの結論

ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。

1. ページの適用性の問題:

モバイル端末は解像度や画面サイズが異なります。Webページの幅をコンピュータのデザインのように1003pxなどのピクセル値に制限し、フォントサイズに12pxまたは14pxを使用すると、異なる端末の効果は大きく異なります。そこで、ウェブページの幅を画面に合わせて調整するのが最善です。幸いなことに、W3CはHTMLを設計する際にこれを考慮してくれました。これはたった1つの文で実現できます。つまり、


コードをコピー
コードは次のとおりです。

<meta name="ビューポート" content="width=デバイス幅"/>

フォントの場合、単位として em または ex を使用できます。

2. バージョン生成の問題:

モバイル ページには、携帯電話ごとに異なるバージョンが用意されていることが多く、一般的には簡易版、標準版、3G 版、タッチ スクリーン版、スマートフォン版などがあります。ページ デザインの違いに加えて、ページ言語も異なります。簡易版は wap 1.0 wml スクリプトで記述されており、非常に汎用性が高く、多くの国内携帯電話がこの言語をサポートしていますが、この言語は非常に簡略化されています。標準バージョンでは、一般的にWAP 2.0テクノロジが使用され、対応するスクリプト言語はXHTML MP(XHTML Mobile Profile)です。この言語はXHTMLのサブセットであり、ほとんどのCSSをサポートしています。基本的にはコンピューターバージョンと同じですが、JSは一般的に使用できません。これは、これらの携帯電話がJSをサポートしていないためです。スマートフォン版については、現在のスマートフォンはすべてjsに対応しているため、このバージョンの制作ははるかに簡単です。ただし、ほとんどのスマートフォン(基本的にSymbianフォンを除く、Android、ios、wp7など)はHtml5に対応しているため、スマートフォン版はhtml5を使用して制作できます。

3. バージョン管理の問題:

この部分は解決が難しいかもしれません。携帯電話の最適なバージョンを賢く判断して、それにジャンプする方法は、次の側面から考えることができます。一方では、携帯電話のオペレーティングシステムを取得する方法があります。たとえば、AndroidまたはiOSの場合は、HTML5バージョンにジャンプできます。Windowsシステムの場合、コンピューターバージョンで電話モデルを取得することで、携帯電話のシステムを取得できることは間違いありません。現在の方法は、ブラウザのUA(ユーザーエージェント)を介して電話に関する情報を取得することです。より簡単な方法は、UAを介して電話のメーカーを直接判断することです。より多くの情報を取得するには、データベースが必要です。携帯電話のモデルによって UA 情報が異なるためです。世界には多くの携帯電話があり、そのようなデータベースを自分で作成するのは依然として困難です。ただし、誰かがすでにそのようなデータベースを作成しています。または、より便利な方法として、携帯電話に最適なバージョンを識別する関数ライブラリを作成しています。ここでは、Wurfl を使用することをお勧めします。一方、ページ上のスクリプトを使用して、ブラウザがjsとhtml5をサポートしているかどうかを判断できます。コードは次のとおりです。


コードをコピー
コードは次のとおりです。

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="ビューポート" content="width=デバイス幅"/>
<title>バージョン管理</title>
<script type="text/javascript">
window.onload = 関数(){
// jsがサポートされているかどうか確認する
try{//HTML5がサポートされているかどうかを確認する
ドキュメント。getElementById("c").getContext("2d");
document.location = 'HTML5をサポートするリンク';
}catch(e){//それ以外の場合はjsバージョンにジャンプします
document.location = 'サポート js バージョン';
}
};
</スクリプト>
</head>
<本文>
<キャンバスid='c'></キャンバス>
通常版
</本文>
</html>

モバイルクライアントかどうかを判断するためだけにバージョンを開発したい場合は、discuz からのコード引用があります。x2


コードをコピー
コードは次のとおりです。

<?php
関数 checkmobile() {
グローバル $_G;
$モバイル = 配列();
静的 $mobilebrowser_list = array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',
「ucweb」、「windows ce」、「symbian」、「series」、「webos」、「sony」、「blackberry」、「dopod」、「nokia」、「samsung」、
「palmsource」、「xda」、「pieplus」、「meizu」、「midp」、「cldc」、「motorola」、「foma」、「docomo」、「up.browser」、
「up.link」、「blazer」、「helio」、「hosin」、「huawei」、「novarra」、「coolpad」、「webos」、「techfaith」、「palmsource」、
「アルカテル」、「アモイ」、「Kタッチ」、「ネクシアン」、「エリクソン」、「フィリップス」、「サジェム」、「ウェルコム」、「ブンジャルー」、「マウイ」、「スマートフォン」、
「iemobile」、「spice」、「bird」、「zte-」、「longcos」、「pantech」、「gionee」、「portalmmm」、「jig browser」、「hiptop」、
'benq'、'haier'、'^lct'、'320x320'、'240x320'、'176x220');
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {
$_G['モバイル'] = $v;
true を返します。
}
$brower = 配列('mozilla'、'chrome'、'safari'、'opera'、'm3gate'、'winwap'、'openwave'、'myop');
if(dstrpos($useragent, $brower)) は false を返します。
$_G['モバイル'] = '不明';
if($_GET['mobile'] === 'yes') {
true を返します。
} それ以外 {
false を返します。
}
}
関数 dstrpos($string, &$arr, $returnvalue = false) {
if(emptyempty($string)) は false を返します。
foreach((配列)$arrを$vとして) {
if(strpos($string, $v) !== false) {
$return = $returnvalue ? $v : true;
戻り値 $return;
}
}
false を返します。
}
var_dump(checkmobile()); //モバイル端末の場合はtrueを返し、そうでない場合はfalseを返す
?>

4. モバイル版のサイズの問題:

一般的に言えば、モバイル Web ページの簡易版と通常版については、できるだけ簡潔にし、できるだけ多くのコードを節約するように努めます。結局のところ、モバイル データ トラフィックは依然としてユーザーにとって非常に貴重です。例えば、要素に名前を付ける場合、ページ数が少ない場合は名前が短いほどよく、CSS は 1 行で記述するのが最適です。 CSS では、一部の要素は親クラスのスタイルを継承します。繰り返し定義する必要はなく、デフォルト値を有効活用してください。

5. ブラウザキャッシュ:

更新が速くない場合は、ブラウザのキャッシュを有効にするのが最適です。

<<:  MySQL ツリー構造テーブルの設計と最適化に関する簡単な説明

>>:  DockerにRocketMQをインストールするための実装手順

推薦する

Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....

ウェブページのフッターで注意すべきことのまとめ

たくさんのリンクおそらく、このようなサイトをたくさん見たことがあるでしょう。ページの下部に 50 個...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

テーブルの追加と削除の操作を実装する js

この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...

メンテナンス可能なJSコードの書き方を教えます

目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...

MySQL 起動失敗の問題とシナリオ分析

1. ワンストップソリューション1. 問題の分析と特定 # MySQL設定ファイルを見つけて、MyS...

jsはシングルクリックでテーブルを変更することを実装します

Pure jsは、参照用にワンクリックで編集可能なテーブル(トランスクリプトに似たもの)を実装してい...

行間隔が広い場合の解決策(IE では 5 ピクセル多い)

コードをコピーコードは次のとおりです。 li {幅:300px; 高さ:23px; 行の高さ:24p...

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

トークンの有効期限が切れたときにページを更新するときに繰り返しプロンプトが表示されないようにする Vue について

トークンの有効期限が切れたら、ページを更新します。ページの読み込み時にバックエンドに複数のリクエスト...

mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...