プロジェクト内の電話側のページには、いくつかの問題と解決策を（継続的に更新）に遭遇しました

iOSの上でスクロールスライドケイトン問題：ページがオーバーフローを使用する解決1.？

それは、IOS上のページのスライドカトンの問題を引き起こす可能性があり、100％：まず、高さを高くするhtmlと体のページを持つことができます。：の溶液である
100％除去：缶体とHTML高さかどうかを確認する（1）。
体を増加させるためにタッチまたは：ローリングコンテナ（2）の増加：-webkit-オーバーフロースクロール本体{オーバーフロー-X：隠されました }。

ページタブを遮断する効果の反動2.iosページのゴム？

（1）時には、HTMLや身長：問題を取り除くために100％が消滅してしまうかもしれません。
（2）デフォルトのイベント動作を防止するための閾値に達するまでの時間

var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
     startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
     endY = e.touches[0].pageY;  //记录手指触摸的移动中的坐标
     //手指下滑，页面到达顶端不能继续下滑
     if(endY>startY&& $(window).scrollTop()<=0){
         e.preventDefault();
     }
   //手指上滑，页面到达底部能继续上滑
     if(endY<startY&& $(window).scrollTop()+ 
         $(window).height()>=$('body')[0].scrollHeight){
         e.preventDefault();
     }
})

時には問題がポップアップした後、ゴムバンド効果の二つの層を満たし、ポップ・ポップ、我々は、クラス名は、このような基礎となるのページスライドゴムバンドの効果を禁止され、クラス名の下にページを追加することができたときにそれが、禁止されますポップ層には影響を与えません。

3.IOSモデルマージンプロパティは問題ではありませんか？

故障時、マージン底サファリのパーセンテージとして（1）を設定するHTML身長
代わり直接マージンをパディング（2）

4.Iosバインドクリックイベントは実行されませんか？

ポインタ：（1）スタイルカーソルを追加します。CSSの背景フラッシュの排除をクリックしてください：-webkit-タップハイライトの色を透明。

検索に5.Iosキーボードラップ？

まず、入力フォームの内部に配置されるべきです。
そして、「ラップ」「行く。」となっています
あなたは、「検索」、入力セットタイプになりたい場合は=「検索」。

6.Jqは、クリックイベントタグのために有効になりませんか？

この理由は不明で、何人かの友人は、説明します。私たちは通常、クリッカブルAのラベルテキストです。そこで、我々は、JS Aのラベルを使用する必要がありますクリックイベントをシミュレートするには、最初にJS Aラベルのテキストをキャプチャするために要素を追加する必要があり、その後、要素にシミュレートクリックにJSを使用しています。しかし、私はそれが合理的であると思いますが、理由はまだあるものの、解決策を見つけることができません。
（1）のdocument.getElementById（ "ABC"）.click（）;
（2）$（ "＃ABC"）[0] .click（）;

7.時にはので、ページ上の画像のサーバまたは他の原因が見つかりませんか？

これは、私たちが絵を見つけられませんでした地元の代わりに画像を使用する必要がしたいものです

<script type="text/javascript"> 
function nofind(){ 
var img=event.srcElement; 
img.src="images/logoError.png"; 
img.onerror=null; 控制不要一直跳动 
} 
</script> 

<img src="images/logo.png" onerror="nofind();" />

固定：8.transformプロパティは、位置に影響しますか？

（1）所定の仕様：要素の値がnoneに変換しない場合、要素は、積層コンテキストを含むブロックを生成します。電話で、同じコンピュータ上だけではなく、CSSトランスフォームモジュールレベル1。影響を受けた固定要素に加えて、z屈折率（積層コンテキスト）値も影響を受けます。そして、それは絶対に影響されるようなブロック関連のプロパティなどの要素を配置含まれています。ディスプレイは要素がインラインで変換場合はもちろん、それは違うだろう。最も簡単な解決策は、絶対的な、固定された要素を持つことができない内部要素を変換することです。

位置のための9.ios：非常にフレンドリーな固定は、時には我々は少しの契約を追加する必要がありますか？

上記アンドリュースは、移動にページを移動し、ソフトキーボードがポップアップページ入力ボックスの下部にクリックしてください。
上記のIOSは、ソフトキーボードがポップアップし、それを見るためにボックスを入力し、ページの入力ボックスの下部にクリックしてください。。。言ったことについて、iscroll、jqueryの-機動、絶対的な検索、FIXEを、静的は非常に複雑であり、我々は多くのことを変更する必要があります。。。
彼は最下部にポップアップ表示できるようにスクロールバーをしてみましょう

var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
    $('textarea').focus(function () {
        window.setTimeout('scrollBottom()', 500);
    });
}
function scrollBottom() {
    window.scrollTo(0, $('body').height());
}

10.jqの検証プラグイン検証問題？

（1）入力が名前を持っているか、間違っている必要がありますので、

11.時々電話は、私はいくつかの処理ネットワークを行う可能性がありますケースを壊していなかった、ネットワークの状況をオフになりますか？

（1）navigator.onLineオフラインかどうかを判断することができます。

12.オブジェクトの長さが決定されますか？

（1）Object.keys、Object.keys方法は、アレイは、オブジェクトのプロパティ内に設置され、配列を返します。

var person = {
    "name" : "zhangshan",
    "sex" : "man",
    "age" : "50",
    "height" : "180",
    "phone" : "1xxxxxxxxxx",
    "email" : "[email protected]"
};
var arr = Object.keys(person);
console.log(arr.length);

（2）Object.getOwnPropertyNames（OBJ）.LENGTH

我々はObject.getOwnPropertyNamesでそれらの間の差をObject.keysを使用し、質問13.？

Object.keys定義：文字列配列オブジェクトは属性を列挙することができ返します。
Object.getOwnPropertyNames定義：オブジェクトを返しますが、列挙された属性名を列挙されていないことができ、
列挙属性、非列挙のプロパティ：定義：列挙プロパティがtrueにこれらの内部「列挙」属性フラグがセットされ、直接、初期化属性プロパティの割り当てのために、識別子の値はデフォルトで、Object.definePropertyによって定義された他の属性についても同様ですfalseにID値をデフォルトとします。

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length);           //output：1
console.log(Object.getOwnPropertyNames(obj).length);    //output：2

console.log(Object.keys(obj));           //output：Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj));    //output：Array[2] => [0: "prop1", 1: "prop2"]

総合的な例：

var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});

console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true

console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false

console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true

for (var item in obj) {
    console.log(item);
}
//output：prop1

for (var item in Object.getOwnPropertyNames(obj)) {
    console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]

14.異なるポップアップ数値キーパッドの問題の携帯電話の開発？

タイプ（1）=「TEL」
のiOSとAndroidキーボード性能が類似している
（2）タイプ=「番号」
の利点は真のデジタルキーボードのAndroidで達成される
のiOSは、方向パッド、キーボード入力の下にはない便利ではない。一つの欠点は
欠点II：古い（使用されるマイクロチャネルX5カーネルを含む）のAndroid無味スーパー入力ボックスの後に小さな尾となり、とAndroid 4.4.4に良いが、後で削除。
しかし、欠点のために第二には、私たちが出て修正するためにWebKitの民間擬似要素を使用することができます。

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
}

（3）パターン属性
フォームの入力内容の検証のためのパターン、通常、パターンを追加し、簡単なデータ・フォーマット検証組み込まれていなどの電子メール、電話、数、データ型、URLなどのHTML5タイプ属性、よりシンプルで効率的なの前端部を確認。
もちろん、使用正規表現のプロパティ値パターン。
単純なデジタル検証の例として
2つがあることを確認する数
の<input type = "番号"パターン= "D">
の<input type = "番号"パターン= "[0-9] *">が

15.input [番号]数値以外の文字入力タイプ

JS得られた値は空であり、例えば-12、+ 123、等のために

16.Javascript：history.go（）とhistory.back（）の使用との違い？

簡単に言えば：（-1）GO：バックは、元のページのフォームの内容が失われます。背中を（）：戻り元のページの表形式の以前の内容に保持されます。history.go（-1）：バック+リフレッシュhistory.backは（）：バック
ブラウザの背中の異なる振る舞いが異なるのための理由は、違いに気づき、その差はJavaScriptを語った：）history.go（と同様の違いは（）のをhistory.back。
データ要求は、データアプリケーションを提出する場合はFF Chromeとブラウザのバック・ページは、ページには、戻って更新されます。同様のhistory.go（-1）;
（デスクトップおよびiPad版を含む）、およびSafariは戻るボタンはページを更新していない、それはデータの申請書を提出しません。JavaScriptに似て：history.back（）;

17.Metaの基本：

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    设置viewport宽度，为一个正整数，或字符串‘device-width’
// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放 
空白页基本meta标签
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

18.どのようにエンドカスタムフォントのフォントファミリを移動するには？
フォント--------------------------------------中国の英語名@
歌SimSun @
@黒SimHei
@マイクロチャネルマイクロソフトでエレガントな黒yaHei
マイクロソフトで微軟正黒體JhengHei @
のTimes New Roman NSimSun @
タイムズ新しいMingLiU @
細かい明MingLiU @
斜体DFKaiにSB-マーク@
@斜体FangSong
@イタリックカイティ
@イタリックFangSong_GB2312 _GB2312
@ KaiTi_GB2312斜体_GB2312
@
@注：英語のHelveticaでのTimes New Roman、エレガントな黒を、使用する最も中国語フォント

ボディ{フォントファミリ：微軟雅黒、SimSun、ヘルベチカ。}

19.書き込み、電子メールへの電話のテキストメッセージは、どのように達成するために？

// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>

//  二、发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>

// 三、写邮件
<a href="mailto:[email protected]">点击我发邮件</a>
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]">点击我发邮件</a>
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]&[email protected]">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:[email protected];[email protected]">点击我发邮件</a>
//5.包含主题，用?subject=
<a href="mailto:[email protected]?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 
<a href="mailto:[email protected]?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:[email protected]?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片（PC不支持）
<a href="mailto:[email protected]?body=<img src='images/1.jpg' />">点击我发邮件</a>
//9.完整示例
<a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

前記移動端末のタッチイベント（WebKitのとwinphoneを区別するために）？

//以下のサポートWebKitの
指が画面の時間に触れたときに発生touchstart--。かかわらず、指の現在の数の
連続スクリーントリガ上で指をスライドさせるときtouchmove--。ストップページスクロール：通常、我々は、画面のページをスライド、デフォルトの発生を防止できるのでpreventDefaultイベント（）を呼び出し
、画面を指の葉ときにトリガtouchend--
システムの追跡を停止touchcancel--が触れ、それが引き金になるときに。たとえば、警告（）プロンプトボックス中のタッチでの突然のページには、この時間はほとんど使用されませんイベントをトリガします

//たTouchEvent説明：
タッチ：画面上のすべての指
targetTouches：対象領域における指の指の情報
changedTouches：イベントトリガーフィンガーに関する最新情報
touchend時間、タッチとtargetTouches情報は、最後の情報保存changedTouchesを削除されます。指を計算するための最良の情報

//パラメータ情報（changedTouches、[0]）
clientX、clientYプロパティは、の表示領域座標
目標：現在の要素を

//インシデントレスポンスシーケンス
ontouchstart> ontouchmove> ontouchend> onclickの

21.クリックして要素の背景やどのように境界線を削除します

//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签 
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">

フォーム要素美しく22

//、外観WebKitのブラウザのデフォルトの外観を変更するために使用される
入力を選択{-webkit-外観：なし;外観：なし;}

//第二には、winphoneの下、フォーム要素のデフォルトの外観に変更する擬似要素の使用
// 1は、デフォルトの矢印、::を選択し無効に- 。MS-拡大ドロップダウン非表示に背景画像を設定し、フォームコントロールを変更するには、矢印や使用変更
::選択- MS-展開{表示：なし;}

2 // Disableオプションチェックボックスデフォルトのスタイル、:: - MS-チェックフォームのデフォルトアイコン、非表示を変更し、修正するために、背景画像の設定を使用するように、チェックボックスまたはラジオボタンを
入力[タイプ=ラジオ] :: - MSチェックを
入力[タイプ=チェックボックス] :: - MSチェック{表示：なし;}

// 3 PC側のフォーム入力ボックスデフォルトクリアボタンを無効にするには、:: - MS-クリアクリアボタンを修正、変更する非表示および使用に背景画像を設定する
[タイプ=テキスト]入力:: -クリア-MS、
タイプ= TELのINPUT [ ] :: -クリア-MS、
INPUT [TYPE =番号] :: - {MS-クリア表示：なし;}

23.携帯端末装置のフォント・サイズ、フォント選択PXまたはREM？

//モバイルデバイスの多様に合わせて、REMを使用することをお勧めします。以下の参考値：
HTML {フォントサイズ：62.5％;} // 10 * 16 = 62.5％
//ここセットフォント12ピクセル注レムPXを追加する値に対応する前に、溶液は、互換性のあるブラウザサポートREMないこと問題は、縮退構成ない
本体{フォントサイズ：12ピクセル、フォントサイズ：1.2remを;}

disable属性を追加する24.inputラベルは、フォントの色の問題のIOSの終わりと互換性がありませんか？

入力、[無効]入力：{無効、input.disabled

color: #3e3e3e;  
-webkit-text-fill-color: #3e3e3e;  
-webkit-opacity:1;  
opacity: 1;

}

問題の25.IOSカーソルサイズ

IE：かかわらず、行がないテキスト、カーソル高一貫したフォントサイズを有していないかどうか。
FF：テキストカーソル、フォントサイズ、行の高さと一致しています。行が入力されていません場合、カーソルは、高さの入力と高度に一致しています。
クロム：この行が入力されていませんと、カーソルの高さは行の高さと一致する、行のテキスト、カーソルは（行の高さの設定時間の両方の場合に）上からテキスト入力の底部までの高さであり、ノーがある場合行の高さ、それはフォントサイズと一致しています。
IOS似たような状況とChrome。

フォントサイズと一貫性のある行の高さを設定し、パディング気晴らしのサイズが
唯一のIEブラウザの高さラインに提供される
-ms-行の高さ：40ピクセル;

26.history.go（）とhistory.back（）の使用との違い？

行く（-1）：戻る、元のページのフォームの内容は、新しいページを失われます。
バック（）：元のページの表形式の以前の内容に戻る保持されます。
異なるバックブラウザの動作も異なります。
データ要求は、データアプリケーションを提出する場合はChromeとFFブラウザのバック・ページは、ページには、戻って更新されます。同様の
history.go（-1）。
戻るボタンの（デスクトップ版とiPad版を含む）サファリは、ページを更新しない、それがデータの申請書を提出しません。同様に
Javascriptを：history.back（）。

27.buttonラベルは、型を書いていませんか？

ボタンのラベルの代替入力音が、ない場合には、ライトタイプは、多くの問題があります。
デフォルトタイプからボタンタグボタンをクリックしてからの時間に提出された場合1.提出します。
2.時々、ボタンのクリックイベントに複数回結合しました。
ボタンの値、すなわちブラウザは、ボタンの間で得られた値、他の取得した値の値であり、取得します