メタの基礎知識:
H5 ページウィンドウはデバイスの幅に自動的に調整され、ユーザーによるページの拡大縮小を禁止します
//1. HTML ページの構造
// width ビューポートの幅を正の整数として設定します。または文字列 'device-width'
// height ビューポートの高さを設定します。通常、幅が設定されている場合、高さは自動的に解析されます。
// 初期スケール。デフォルトのスケーリング率は、小数点以下を含む数値です
// minimum-scale ユーザーの最小ズーム率を許可します。これは、小数点以下を含む数値です
// Maximum-scale ユーザーの最大ズーム率を許可します。小数点も含めることができる数値
// user-scalable 手動スケーリングを許可するかどうか
//2.JS動的判断
varphoneWidth = parseInt(window.screen.width);
varphoneScale =phoneWidth/640 ;
var ua = navigator.userAgent;
if (/Android (d+.d+ )/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('');
}else{
do Cument.write('');
}
} else {
document.write('');
}
空白ページの基本メタタグ
その他のメタタグ
FAQ:
モバイル端末でのフォントファミリーの定義方法
@ ------------------------- --------------中国語フォントの英語名
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信 雅黑 Microsoft Yahei
@ Microsoft JhengHei
@ 新宋体 NSimSun
@ 新明体 MingLiU
@ 明LiU
@ 標準楷書 DFKai-SB
@ FangSong
@楷体 KaiTi
@ FangSong_GB2312 FangSong_GB2312
@楷体_GB23 12 KaiTi_GB2312
@
@ 注:ほとんどの中国語フォントは Song と Yahei を使用し、英語は Helvetica を使用します
body { font-family: Microsoft Yahei, SimSun, Helvetica; }
電話をかける方法、テキスト メッセージを送信する方法、メールを作成する方法// 1// 2. テキスト メッセージを送信します。winphone システムは無効です
テキスト メッセージを次の宛先に送信します: 10086//注: これらの機能を追加する場合、最初の機能は「?」で始まり、次の機能は「&」で始まります
//1 通常のメール
// 2. 受信アドレスの後に ?cc= を追加すると、カーボン コピー アドレスを追加できます (Android には互換性の問題があります)
//3 カーボン コピー アドレスの後に &bcc= を記述します。ブラインド コピーを追加できます 送信アドレス (Android には互換性の問題があります)
//4. 複数の受信者、CC、BCC を含め、複数のメール受信者を区切るにはセミコロン (;) を使用します。アドレス
//5。件名を含めるには、?subject=
//6。コンテンツを含めるには、?body= を使用します。 ; コンテンツにテキストが含まれる場合は、%0A を使用します。テキストを折り返します
//7 コンテンツにはリンクが含まれており、http(s):// などを含むテキストは自動的に変換されます。リンクに変換
// 8. コンテンツには写真が含まれています (PC ではサポートされていません)
//9. 完全な例
モバイル タッチ イベント (Webkit と winphone を区別してください)
/* ユーザーがモバイル デバイスに指を置き、画面上でスライドするとトリガーされるタッチ イベント*/
// 以下は Webkit をサポートしています
touchstart - 指が画面に触れると発生します。現在の指の数に関係なく、
touchmove - 指が画面上をスライドすると継続的にトリガーされます。通常、ページをスライドするときに、イベントのPreventDefault() を呼び出して、デフォルトの状況が発生するのを防ぎます。ページがスクロールしないようにします。
touchend - 指が画面から離れるとトリガーされます。
touchcancel - システムがタッチの追跡を停止するとトリガーされます。たとえば、タッチ プロセス中にプロンプト ボックスがページ上で突然アラート () を表示すると、このイベントがトリガーされます。このイベントは比較的まれに使用されます
//TouchEvent の説明:
touches: 上のすべての指に関する情報。 screen
targetTouches: 指 ターゲット領域の指情報
changedTouches: イベント
touchendをトリガーした最後の指情報が削除されると、タッチとtargetTouches情報は削除されます。changedTouchesによって保存された最後の情報は、指の計算に最適です。情報
//パラメータ情報(changedTouches[0])
clientX、clientYの表示領域内の座標
target: current element
//イベント応答シーケンス
ontouchstart > ontouchmove > ontouchend > onclick
// 以下は winphone 8 をサポートします
MSPointerDown - 指が画面に触れると発生します。現在の指の数に関係なく、
MSPointerMove - 指が画面上をスライドすると継続的にトリガーされます。通常、ページをスライドするときは、CSS html{-ms-touch-action: none;} を呼び出して、デフォルトの状況、つまりページのスクロールを防ぐ
MSPointerUp - 指が画面から離れるとトリガーされます
モバイル クリック 画面の応答が 200 ～ 300 ミリ秒遅れます
注: モバイル デバイス上の Web ページでは 300 ミリ秒の遅延が発生し、ボタンのクリックが遅れたり、クリックが失敗したりすることがあります。
以下は、会社の同僚が共有した歴史的な理由です:
2007 年、Apple は、PC 上の大画面に適した Web ページをより適切に表示するために、iPhone 上の最初の IOS システムである Safari をリリースしました。携帯電話では、ダブルタップしてズームするソリューションが使用されます。たとえば、ブラウザを使用して携帯電話の PC 上の Web ページを開くと、ページのコンテンツが画面全体に表示されることがあります。 、フォント、画像などが小さすぎてよく見えません。このとき、画面の特定の部分をすばやくダブルクリックすると、その部分を拡大してはっきりと見ることができます。元の状態に戻ります。
ダブルクリックしてズームとは、画面を指で素早く 2 回クリックすることを意味し、iOS に付属の Safari ブラウザは Web ページを元の比率にズームします。
その理由は、ユーザーがジャンプリンクなどの画面上の要素をクリックしたとき、ブラウザは最初にクリックをキャプチャしますが、ユーザーが単にクリックしたかどうかをブラウザが判断することができないためです。リンク上でクリックするか、領域をダブルクリックしてズーム操作を行うため、最初のクリックをキャプチャした後、ブラウザーは一定期間それを保持します。ユーザーが t 時間以内に次回クリックしない場合、ブラウザーは次のクリックを行います。ブラウザはクリックしてジャンプするリンクを処理します。ユーザーが t 時間以内に 2 回目にクリックすると、ブラウザはジャンプを禁止し、代わりにページのこの部分でズーム操作を実行します。では、この時間間隔 t はどれくらいでしょうか? iOS safari では約 300 ミリ秒です。遅延の原因はここにあります。その結果、ユーザーが単にページをクリックした場合、ページの応答に時間がかかり、Web 開発者にとっては、ページ js によってキャプチャされたクリック イベントのコールバック関数の処理に 300 ミリ秒かかることになります。間接的に有効になります。他のビジネス ロジックの処理に影響を与えます。
//解決策:
fastclickは携帯電話のクリックイベントの300ms遅延を解決できます
zeptoのタッチモジュール、タップイベントもクリック遅延問題を解決します
Rentinaディスプレイの原理と設計ソリューション
説明: Retina スクリーンは、同じサイズの画面上に表示されるピクセルの数が 1 つから複数に変化する超高ピクセル密度の LCD スクリーンです。たとえば、Apple デバイスの Retina ディスプレイ画面です。 、1 つのピクセルが 4 になります。
高解像度ディスプレイのビットマップは拡大され、画像がぼやけるため、モバイル モックアップは通常、従来の PC の 2 倍の大きさに設計されています。
その後、フロントエンドの解決策は次のとおりです: デザインドラフトから切り取った画像の長さと幅が偶数であることを確認し、背景サイズを使用して画像を元の 1/2 に縮小します
//例えば、画像の幅と高さが200px* 200pxの場合、書き方は次のようになります
.css{width:100px;height:100px;background-size:100px 100px;}
//値他の要素は元の 1/2 です (ビジュアル ドラフトの 40px のフォントなど)。スタイルは 20px
.css{font-size:20px}
//image-set design として記述されますRentina 背景画像
image-set、Webkit プライベート プロパティ、CSS4 のプロパティでもあり、Rentina 画面下の問題を解決するための画像から生まれました。
.css {
background: url(images/bg.jpg) no-repeat center;
background: -webkit-image-set(
url(images/bg.jpg) 1x, //サポート画像-通常画面を設定します
url(images/bg-2x.jpg) 2x); //image-set Rentinan をサポートします
}
要素をクリックして生成される背景または境界線を削除する方法
/ios ユーザーは a をクリックしますリンクすると、半透明の灰色のマスクが表示されます。無効にしたい場合は、-webkit-tap-highlight-color のアルファ値を 0 に設定して、灰色の半透明マスクを削除します。
//Android ユーザーがクリックすると、リンク、境界線、半透明のグレーのマスクなど、メーカーによって異なる効果が定義されています。 -webkit-tap-highlight-color のアルファ値を 0 に設定すると、マシンに付属の効果の一部を削除できます。システム、ラベルをクリックして生成されます。灰色の半透明の背景は
を設定することで削除できます。//特記事項: Xiaomi 2 など、一部のモデルは削除できません。 buttonクラスには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 の下で
//1 を使用します。 Webkit のブラウジングを変更する外観入力、{ -webkit-Appearance:none; 外観: none; を選択します。 winphone で、疑似要素を使用してフォームのデフォルトの外観を変更します。要素
//1. デフォルトの矢印の選択を無効にし、::-ms-expand フォーム コントロールのドロップダウン矢印を変更し、非表示に設定し、背景画像を使用して装飾します
input[type=radio]::-ms-check,input[type=checkbox ]::-ms-check { display:none; } //3 フォームのデフォルトのクリアボタンを無効にします。 PC側の入力ボックス、::-ms-clear クリアボタンを変更し、非表示に設定し、背景画像を使用して変更します
input[type=text]::-ms-clear,input[type =tel]::-ms-clear,input[type=number]::-ms-clear { display:none; }
モバイルフォントの単位 font-size として px または rem を選択します
// Ifさまざまなモバイル デバイスに適応する必要がある場合は、rem を使用することをお勧めします。以下は参考値です:
html { font-size: 62.5% } //10*16 = 62.5%
//12px フォントを設定します。rem をサポートしていないブラウザの互換性の問題を解決し、正常なダウングレードを実現するために、rem の前に対応する px 値を追加してください
body { font-size:12px; }
超実用的なCSSスタイル
//Webkitスクロールバーを削除します—display: none;
//その他のパラメータ
::-webkit-scrollba //スクロールバー全体
::- webkit-scrollbar-thumb //スクロール バー内の小さな四角
::-webkit-scrollbar-track //スクロール バー トラック
::-webkit-scrollbar-button //スクロール バー トラックの両端のボタン
:: -webkit-scrollbar-track-piece //スクロール バーの中央部分、内蔵トラック
::-webkit-scrollbar-corner //角、2 つのスクロール バーの交差点
: :-webkit-resizer //ドラッグして要素のサイズを変更するためのスクロール バーの交差点にある小さなコントロール
// リンクの長押しと画像ポップアップ メニューを無効にする
a,img { -webkit-touch- callout: none }
// iOS および Android ユーザーによるテキストの選択を禁止します
html,body {-webkit-user-select:none; }
// 色の値を変更します入力ボックスのプレースホルダーの
::-webkit -input-placeholder { /* WebKit ブラウザ */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 ～ 18 */
color : #999; }
::-moz -placeholder { /* Mozilla Firefox 19 以降 */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10 以降 */
color: #999; }
input:focus ::-webkit-input-placeholder{ color:#999; }
// Android の音声入力ボタンを削除します
input::-webkit-input-speech -button {display: none}
/ / Windows Phone のデフォルトのタッチ イベントを防止します
/*注: Windows Phone のデフォルトのタッチ イベントに e.preventDefault を使用することは無効であり、次のようなスタイルで無効にすることができます。 : */
html { -ms-touch-action:none ; } //winphone のデフォルトのタッチイベントを無効にする
iOS での入力をキャンセルし、入力時に英語の頭文字を大文字にする
携帯電話で写真をアップロード
//IOSには写真撮影、ビデオ録画、ローカル選択写真機能がありますが、一部のAndroidにはローカル写真選択機能しかありません。 Winphone は画面の回転イベントとスタイルをサポートしていません
// js 処理
Function Orientinit () {varianTChk = document.documenteason.clientWidth> Height? 'Landscape ': Portrait'; = 'Lapdscape') {
// これは横画面で実行する必要があるイベントです }} else {
}}
orientInit();window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){ setTimeout(orientInit, 100);}, false) //CSS処理//縦画面用スタイル@media all and (orientation:portrait){ }//横画面用スタイル@media all and (orientation:landscape) { }
audio iOS と Android では要素とビデオ要素を自動的に再生できません
//オーディオ、書き方 1
お使いのブラウザはまだサポートしていません
//オーディオ、書き方 2
音楽 bg.ogg の再生が優先され、bg.mp3 の再生はサポートされていません
$ (window).one('touchstart', function(){
music.play();
}, false);
//概要
//1. audio 要素の autoplay 属性は、IOS と Android では使用できませんが、PC では正常に動作します
//2. .audio 要素がコントロールを設定しない場合、IOS と Android ではスペースを占有しますが、 PC 上の Chrome はスペースを占有しません
重力感知イベント// HTML5 deviceMotion を使用して重力感知イベントを呼び出しますif (window.DeviceMotionEvent){ document.addEventListener('devicemotion', deviceMotionHandler, false)} var Speed = 30;var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var加速度 =event.accelerationincludeGravity;
x = 加速度.x;
y = 加速度.y;
z = 加速度.z;
if(Math.abs(x-lastX)>speed || Math. abs(y-lastY)>speed Math.abs(z-lastZ)>speed ){
//シェイク後に実行するメソッドはこちら
abs(y-lastY)> Lasty = y; lastz = z;
}
Function yaoaaffter () {
// 何かをする
}
// 説明: js
をシェイクする場合について言えば、WeChat ブラウザー ページがスタックします。ユーザーがフォント サイズを調整した後、ユーザーが調整できないようにする方法//次のコードは、ユーザーのフォント ズームによって Android ページが強制的にサイズ変更されるのを防ぐことができますが、約 1 秒の遅延が発生します。 、その間、ロードして処理することを検討できます if (typeof(WeixinJSBridge) == "unknown") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){
) WeixinJSBridge .invoke(' setFontSizeCallback', { 'fontSize':0}, function(res){
}else{
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize ':0}、関数(res){ }, 0 )
}
//IOS では、-webkit-text-size-adjust を使用して、ユーザーがフォント サイズを調整できないようにすることができます
body { - webkit-text-size-adjust:100%! important; }
//最良の解決策: レムまたはパーセントレイアウトを使用するのが最善です
位置決めの落とし穴//固定位置決め// 1. iOS での固定要素は、ソフト キーボードが表示されると、固定要素の位置に影響します。//2 は、ソフト キーボードが表示される場合よりも優れています。固定要素の位置には影響しません//3。Position:fixed は iOS 4 ではサポートされていません//解決策: [Iscroll ](http://cubiq.org/iscroll-5) を使用します。例:
<script></script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
//位置の位置決め
//Android でソフトキーボードがポップアップ表示されると、要素の絶対位置に影響します
//解決策:
var ua = navigator.userAgent. IndexOf( 'Android');
if(ua>-1){
$('.ipt').on('focus', function(){
$('.css').css({ '可視性 ':'非表示'})
}).on('ぼかし', function(){
}
ビデオ再生は全画面表示ではありません
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
