モバイル Web 開発の概要_html/css_WEB-ITnose

Web ページの幅を画面に合わせます8882a4150206f3988779b8259376765e



Web ページの開き方: b5d8c22d7176a69a422a09161c102acdLink5db79b134e9f6b82c0b36e0489ee08ed

ターゲット値: _self (同じウィンドウ、ブラウザのデフォルト)、_top (フルページウィンドウ)、_parent (親ウィンドウ) は同じ、_blank (新しいウィンドウで開きます)

93f0f5c25f18dab9d176bd4f6de5d30e 4c4306c47cc9d3340ef4f3177dcda2b39c3bca370b5104690d9ef395f2c5f8d1 ページ内のすべてのリンクが新しいウィンドウで開かれることを示します

5e3f596dff8f0f865cc575d77fcef66cmadinc.co4a11e5928b3688cf38c9163b657eb5ac//

autocomplete="off"//入力ボックスの履歴を削除します Record

querySelector は、最初に一致した要素のみを返し、一致しない場合は null を返します。

querySelectorAll は一致する要素のコレクションを返します。一致する要素がない場合は、空のノードリスト (ノード配列) を返します。

document.querySelector('#indicator > li.active').className = '';//...

innerheight: ウィンドウのドキュメント表示領域の高さを返します。 (IEはdocument.documentElement.clientHeightを使用します)

innerwidthはウィンドウのドキュメント表示領域の幅を返します。 (IE は document.documentElement.clientWidth を使用します)

e536ee73375415cdedead0140e29012b

1ed84d3c3f95706ab20984266f1b05d3d06f076a82a0b98e3db3b408a7eafcb8

HTML5 new:
contenteditable: ユーザーが要素を編集できるかどうかを設定します

contentextmenu: 要素のコンテキスト メニューを設定します

ドラッグ可能: ユーザーに要素のドラッグを許可するかどうかを設定します。
無関係: 要素が関連するかどうかを設定します。関連性のない要素は表示されません。
ref: 別の文書またはこの文書上の別の場所への参照。テンプレート属性が設定されている場合にのみ使用されます
登録マーク: 要素の設定の写真を撮ります。 a39152e044f9da4bad5a44f61043aee7 要素を除く、任意の 115f3c7c2e3fd568951253a7530214bb 要素の子孫に指定できます
db8b666bf74172add0559446243cdcda
d8e8001d47c075c702e8c670b66924fa
a5f82090fac311b5ea937a943f5147262cacc6d41bbb37262a98f745aa00fbf0
6e123ad35a4961eb3f27deda75a74e3e//携帯電話では、数字の文字列 (電話番号) Web ページ内の ) はダイヤルハイパーリンクとして表示されません。デフォルトの Telephone=yes

e67950d6a09a776fb7c61852d29b816d//認識されたものを削除します。 Apple メニュー バーとツールバー。Apple メニュー バーとツールバーが必要な場合は省略できます

e9428f72de8292cd737cc6d7b7ed4756//モバイル Web サイト収集時に追加されたアイコン定義属性 - モバイル Web (「デスクトップ アイコンに追加」)

//apple-touch-icon: ハイライトの明るいアイコンを追加

//apple-touch-icon-precomposed: オリジナルのアイコンをデザインします

网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用  window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。

移动网站的视图的标签
0359d37e035f5a1fb230c5231cd220c7
5f4ab1e9f7803d654cfb7375c00a6386...16b28748ea4df4d9c2150843fecfba68
345f2d7e7d0a444e5674f9ba1bd33e00...16b28748ea4df4d9c2150843fecfba68
16a0a68dbb3081627cb4b7eb653ef329...16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

HTML5 の data- プレフィックスは data 属性と呼ばれます

ローカル ストレージ:
sessionStorage.lastname="Smith";//セッション用ストレージ
localStorage.lastname="Smith";//時間制限のないローカル ストレージ ( IE8でもサポートされています)
document.write(localStorage.lastname);
ローカルストレージを使用する前に、まずwindow.localStorageが存在するかどうかを確認する必要があります

4f82821d6e296b3bdc520cdaa26c1bb0//placeholder: デフォルトのプロンプト、必須: 入力フィールドが必須かどうかを定義します (送信時に空でないことの確認)

HTML5 では、オンラインかどうかを検出する 2 つの方法が提供されます。ナビゲーター。オンライン (真/偽) およびオンライン/オフライン イベント。
navigator.standalone が true: デスクトップから開始
navigator.standalone が false: iOS ブラウザから開始

localStorage length: 現在格納されている変数の数を返します。
localStorage.key(n): n 番目の変数のキー値 (key) を返します。
localStorage.getItem(k): localStorage.k と同様に、キー値 k を持つ変数の値を取得します。
localStorage.setItem(k, v): localStorage.k = v と同様に、キー値 k の変数値を設定します。
localStorage.removeItem(k): キー値 k の変数を削除します。
localStorage.clear(): すべての変数をクリアします。

window.applicationCache オブジェクトのイベント:
checking: ユーザー エージェントが更新をチェックするとき、または初めてマニフェスト ファイルをダウンロードしようとするとき、このイベントは多くの場合、イベント キューで最初にトリガーされます

noupdate : マニフェスト ファイルが検出されました 更新はありません

downloading: ユーザー エージェントは更新を検出し、リソースを取得しているか、マニフェスト ファイル リストにリストされているリソースを初めてダウンロードしています

progress: ユーザー エージェントはキャッシュする必要があるリソースをダウンロードしていますリソース マニフェスト ファイル内

cached: マニフェスト内 リストされたリソースがダウンロードされ、キャッシュされました

updateready: マニフェストにリストされたファイルが再ダウンロードされ、正常に更新されました 次に、js を使用してアプリケーションを更新できます。 swapCache() メソッド

廃止: 1. マニフェスト リクエストに 404 または 410 エラーが表示され、アプリケーション キャッシュがキャンセルされます。 2. マニフェスト リクエストで 404 または 410 エラーが発生し、キャッシュを更新するリクエストが失敗します。ファイルは変更されていませんが、ページによって参照されているマニフェスト ファイルが正しくダウンロードされていません

エラー: 1. マニフェストにリストされているリソースを取得中に致命的なエラーが発生しました 2. マニフェスト ファイルが更新プロセス中に変更されました

http ://www.cnblogs.com/roucheng/p/sunwukong.html
b0b78b92d79e0204b03846265ff5dfa2

isLocal: true//リクエストはローカル コンピューターから来ます

document.onreadystatechange メソッドを使用して状態の変化を監視し、
document.readyState == "complete" を使用して読み込みが完了したかどうかを判断します

0 - uninitialized (初期化されていない) は send() メソッドを呼び出していません

1 - ロード中 (ロード中) は send() メソッドを呼び出しており、リクエストは送信中です
2 - ロード済み (読み込み完了) send() メソッドの実行が完了し、すべての応答コンテンツが受信されました
3 - インタラクティブ (対話型) 応答コンテンツが解析中です
4 - 完全 (完了) 応答コンテンツの解析が完了し、クライアントで呼び出すことができます

document.getElementById("testButton").addEventListener("click", Go , false);//リスニング イベントの追加
ウィンドウの DOMContentLoaded イベントは、画像、JavaScript ファイル、CSS ファイル、その他のリソースがダウンロードされたかどうかに関係なく、完成した DOM ツリーが形成された後にトリガーされます。ロード イベントとは異なり、DOMContentLoaded はページのダウンロードの早い段階でイベント ハンドラーの追加をサポートしています。つまり、ユーザーはできるだけ早くページを操作できます。 (これは Firefox での固有のイベントです)
document.addEventListener('DOMContentLoaded',loaded,false); //

リスナーには 3 つの段階があります: キャプチャ段階 (呼び出しがリッスンしているかどうかを確認するためのルート ノードから子ノードへ)関数）→、ターゲットステージ（ターゲット自体）→バブルステージ（ターゲット自体からルートノードまで）。
パブリックオーバーライド関数 addEventListener(type(イベントタイプ):String,listener():Function,useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

$(selector).bind( event) // 一致する要素に 1 つ以上のイベント ハンドラーを追加します
$(selector).live(event) // 現在または将来、一致する要素にイベント ハンドラーを追加します
$(selector).die() 削除されましたlive() 関数を通じて追加されたすべてのイベント ハンドラー
$(selector).unbind() は、選択された要素のイベント ハンドラーを削除し、jQuery を通じてアタッチされたイベント ハンドラーに適用されます

Tmpl にはいくつかのタグが用意されています:
${}: 同等{{=}} に、これは出力変数であり、HTML エンコーディングが渡されています。
{{html}}: 出力変数 html ですが、HTML エンコードなしで、HTML コードの出力に適しています。
{{if }} {{else}}: 分岐ロジックを提供します。
{{each}}: ループ ロジック、$value アクセス反復変数を提供します。

devicePixelRatio: デバイスのピクセル比、高解像度の iPad では、window.devicePixelRatio は 2
(/ipad/gi).test(navigator.appVersion)//モバイル端末のブラウザが ipad であるかどうかを判断し、navigator.appVersion はブラウザのVersion

window.orientation: この属性は現在のデバイスの画面の向きを示します。0 は縦画面を意味し、プラスまたはマイナス 90 は横画面 (左と右) モードを意味します
onorientationchange: 画面の向きを毎回水平画面と垂直画面の間で切り替えますその後、このウィンドウ イベントがトリガーされます。使い方は従来のイベントと同様です。

mobileinit: DOM がページに読み込まれる前のイベント

pagebeforecreate: DOM が初期化される前にトリガーされます。ページの DOM がロードされます。

pagecreate : DOM で HTML が確立された後、初期化も完了します

pageinit: ページが完全にロードされた後

タッチ イベント
にリストされている 3 つの基本的なタッチ イベント
1. touchstart : 指が DOM 要素上に置かれます。

2. touchmove: DOM 要素を指でドラッグします。

3. タッチエンド: DOM 要素から指を遠ざけます。
各タッチ イベントには 3 つのタッチ リストが含まれます。
1. タッチ: 現在画面上にあるすべての指のリスト。
2. targetTouches: 現在の DOM 要素上にある指のリスト。
3.ChangeTouches: 現在のイベントに関係する指のリスト。
たとえば、タッチエンド イベントでは、これは離れた指になります。
これらのリストは、タッチ情報を含むオブジェクトで構成されます。
1. 識別子: タッチ セッション内の現在の指を一意に識別する数値。
2. ターゲット: アクションのターゲットである DOM 要素。
3. クライアント/ページ/画面座標: アクションが発生する画面上の位置。
4. 半径座標と回転角度: 指の形にほぼ等しい楕円を描きます。


gesturestart // 2 本の指が画面に触れるとトリガーされます
gesturechange // 2 本の指が画面に触れた後に動き始めるとトリガーされます

gestureend

onorientationchange // 画面回転イベント
orientationchange // 画面に触れている指の方向が変わったときを検出します

//アドレスバーを非表示にし、イベント処理時にスクロールバーが表示されないようにします
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);

});

e.preventDefault()//イベントのデフォルトアクションをキャンセルします

タップ長押し: イベントを長押しします

var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定义一滚动对象
hScroll:false 禁止横向滚动 true横向滚动 默认为true
vScroll:false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar:false 隐藏水平方向上的滚动条
vScrollbar:false 隐藏垂直方向上的滚动条
fixedScrollbar: 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar:false 指定在无渐隐效果时隐藏滚动条
hideScrollbar: 在没有用户交互时隐藏滚动条 默认为true
bounce: 启用或禁用边界的反弹，默认为true
momentum: 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection:false 取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
zoom:true 滚动对象可以放大缩小
zoomMax: 指定允许放大的最大倍数，默认为4
onScrollEnd:在滚动完成后的回调
x:滚动水平初始位置
y:滚动垂直初始位置
bounce:true,是否超过实际位置反弹
bounceLock:false,当内容少于滚动是否可以反弹，这个实际用处不大
momentum:true,动量效果，拖动惯性
lockDirection:true,当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另一边的拖动  
useTransform:true,是否使用CSS形变  
useTransition:false,是否使用CSS变换 
topOffset:0,已经滚动的基准值(一般情况用不到)
checkDOMChanges:false,是否自动检测内容变化 

【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit- transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩 溃。

document.createElement()是在对象中创建一个对象，要与appendChild() 或  insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()  方法在节点的子节点列表任意位置插入新的节点。
8019067d09615e43c7904885b5246f0a
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
2cacc6d41bbb37262a98f745aa00fbf0

encodeURI()//编码
decodeURI()//解码

 

39000f942b2545a5315c57fa3276f220 标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

停止:
myVideo.currentTime = 0;
myVideo.pause();

 

浏览器的渲染和操作顺序大致如下： 

HTML解析完毕 
外部脚本和样式表加载完毕 
脚本在文档内解析并执行 
HTML DOM完全构造起来 
图片和外部内容加载 
网页完成加载 

 

6db98f064b3e1df7d3d4c786df4d7c7c
news_template = $('#news_template').template();
$.tmpl(news_template, manufacture_news).appendTo('#news_content');
var html = $("#news_content").html();
if (html.indexOf("[br]") > -1)
{
html = html.$replace("[br]", "ff9d32c555bb1d9133a29eb4371c1213");
html = html.$replace("<", "8140ba51f2463453ebf55c434d04e01e");
$("#news_content").html(html);
}

 

385b932c48748e829d10a737aceb7759
ad1ca9641910767b6f8980cab841b2db
4cae1bd1eba04194a47d913a1a944a114a249f0d628e2318394fd9b75b4636b1${Title}473f0a7621bec819994bb5020d29372a45a2772a6b6107b401db3c9b82c049c2${CreateTime}54bdf357c58b8a65c66d7c19c8e4d114c72c1af5e0e7f90179c047c5ef85885e 
67bc4f89d416b0b8236eaa5f43dee742
bd9a0145d7dda835025de43f340a5c36aebd5b27506c90afa4d9cac8fe35bb74${Img}5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846bee${Content}94b3e26ee717c64999d7867364b1b4a3
82e295699cff932a4d4dabba39074c35
16b28748ea4df4d9c2150843fecfba68
2cacc6d41bbb37262a98f745aa00fbf0

------------------数据库优化---------------------
A、数据类型尽量用数字型，数字型的比较比字符型的快很多。

B、 数据类型尽量小，这里的尽量小是指在满足可以预见的未来需求的前提下的。

C、 尽量不要允许NULL，除非必要，可以用NOT NULL+DEFAULT代替。

D、少用TEXT和IMAGE，二进制字段的读写是比较慢的，而且，读取的方法也不多，大部分情况下最好不用。

E、 自增字段要慎用，不利于数据迁移。

系统设计阶段应该归纳一些业务逻辑放在数据库编程实现，数据库编程包括数据库存储过程、触发器和函数。用数据库编程实现业务逻辑的好处是减少网络流量并可更充分利用数据库的预编译和缓存功能。

 

----------
索引的设计

在设计阶段，可以根据功能和性能的需求进行初步的索引设计，这里需要根据预计的数据量和查询来设计索引，可能与将来实际使用的时候会有所区别。

关于索引的选择，应改主意：

A、              根据数据量决定哪些表需要增加索引，数据量小的可以只有主键。

B、              根据使用频率决定哪些字段需要建立索引，选择经常作为连接条件、筛选条件、聚合查询、排序的字段作为索引的候选字段。

C、              把经常一起出现的字段组合在一起，组成组合索引，组合索引的字段顺序与主键一样，也需要把最常用的字段放在前面，把重复率低的字段放在前面。

D、              一个表不要加太多索引，因为索引影响插入和更新的速度。

 

注意SELECT INTO后的WHERE子句，因为SELECT INTO把数据插入到临时表，这个过程会锁定一些系统表，如果这个WHERE子句返回的数据过多或者速度太慢，会造成系统表长期锁定，诸塞其他进程。
A、              控制同一语句的多次执行，特别是一些基础数据的多次执行是很多程序员很少注意的。

B、              减少多次的数据转换，也许需要数据转换是设计的问题，但是减少次数是程序员可以做到的。

C、              杜绝不必要的子查询和连接表，子查询在执行计划一般解释成外连接，多余的连接表带来额外的开销。

---------尖角代码
f07428adc615824d6e8b3d3d2990895e16b28748ea4df4d9c2150843fecfba68

モバイル版 Web サイトは、少なくともいくつかの基本機能を実装する必要があります。
1. ページの適用性。モバイル端末の場合、コンピューター側のデザインでも Web ページの幅が 1003px などのピクセル値に制限されており、フォント サイズが 12px または 14px である場合、端末の違いによる影響が生じます。とても大きくなります。したがって、ここでは、Web ページの幅を画面に合わせて調整することが最善です。幸いなことに、w3c は HTML を設計するときにこれを考慮しており、

Javascript コード

< を追加するだけで済みます。 ; meta name="viewport" content="width=device-width"/>

、フォントの場合は、バージョンの作成の問題として em または ex を使用します。モバイル ページには、通常、合理化バージョン、標準バージョン、3G バージョン、タッチ スクリーン バージョン、スマートフォン バージョンなど、携帯電話ごとに異なるバージョンがあることがよくあります。ページ デザインの違いに加えて、ページ言語も異なります。合理化されたバージョンは wap 1.0 wml スクリプトを使用して記述されており、この言語は多くの国内携帯電話でサポートされていましたが、この言語は非常に合理化されています。標準バージョンでは通常 wap 2.0 テクノロジーを使用でき、対応するスクリプト言語は xhtml mp (xhtml mobile profile) です。この言語は xhtml のサブセットであり、ほとんどの CSS をサポートします。ただし、通常は使用できません。これらの携帯電話は js をサポートしていないことを考慮して、js を使用します。スマートフォン バージョンの場合、ほとんどのスマートフォンが js をサポートするようになったので、このバージョンの作成ははるかに簡単になります。ただし、ほとんどのスマートフォン (Android、ios、wp7 などを含む Symbian 携帯電話を基本的に除く) は Html5 をサポートするため、スマート モバイル。バージョンはhtml5を使用して作成できます。
3. バージョン管理の問題。おそらくこの部分は解決するのが難しいのですが、これらの側面から携帯電話の最適なバージョンを賢く判断してそこにジャンプする方法を検討することができます。一方では、Android や iOS などの携帯電話のオペレーティング システムを入手する方法があり、HTML5 バージョン、Windows システム、そして間違いなくコンピュータ バージョンにジャンプして携帯電話システムを入手することができます。 , 携帯電話のモデルを取得できます。その方法は、ブラウザの UA (ユーザー エージェント) を通じて携帯電話に関する情報を取得することです。UA を通じて携帯電話のメーカーを直接確認できます。携帯電話のモデルによって UA 情報が異なるため、より多くの情報を取得するには、データベースが必要です。しかし、そのようなデータベースを自分で作成するのはまだ困難です。すでにそのようなデータベースが用意されています。もっと便利には、携帯電話に最適なバージョンを特定するための関数ライブラリが用意されています。ここでは Wurfl を使用することをお勧めします。一方、ブラウザが JS と HTML5 をサポートしているかどうかは、ページのスクリプトを通じて判断できます。 コードは次のとおりです。

Javascript コード

<?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.hovertree.org/DTD/xhtml-mobile10.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="width=device-width"/>  <title>版本控制 - 何问起</title>  <script type="text/javascript">  window.onload = function(){    //检测是否支持js    try{//检测是否支持html5      document.getElementById("c").getContext("2d");      document.location = '支持html5版的链接';    }catch(e){//否则跳到支持js版      document.location = '支持js版';    }  };  </script>  </head>  <!-- hovertree.com --><body>  <canvas id='c'></canvas>  普通版  </body>  </html> 

バージョンを開発したいだけの場合は、単に判断してください。モバイル クライアントであっても、discuz からの引用です。一般的に、モバイル Web ページの合理化バージョンと通常バージョンでは、節約できるコードを省略するのが最善です。結局のところ、モバイル トラフィックはユーザーにとって非常に価値があります。たとえば、要素に名前を付ける場合、通常、ページ数が少ない場合は、名前が短いほど、CSS を 1 行で記述するのが最適です。 CSS では、一部の要素は親クラスのスタイルを継承するため、定義を繰り返してデフォルト値を活用する必要はありません。

5. ブラウザのキャッシュ。更新が遅い場合は、ブラウザのキャッシュをオンにすることをお勧めします