目次
3. Android プラットフォームでのメールアドレスの認識を無視します" >3. Android プラットフォームでのメールアドレスの認識を無視します
<meta name="format-detection" content="email=no" />
ログイン後にコピー
HTML5に関する知識のまとめ
html5
この記事は HTML5 に関する知識をまとめたものです。必要な方はぜひ参考にしてください。以下のエディターで見てみましょう。
1: モバイル開発の知識ポイント
1. 単位として rem を使用します
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }ログイン後にコピー
携帯電話のフォント サイズを 100 ピクセルに設定します。320 ピクセルの携帯電話の場合、一致は 100 ピクセルです。電話は等しい比率なので、rem に変換すると、rem = デザインドラフトのピクセル/100 になります。 2. a、ボタン、入力などのラベルの背景を無効にします。 、optgroup、select、textarea など。暗化
<span style="font-size: 14px;"></span>
<a href="">button1</a>
<input type="button" value="提交"/>ログイン後にコピー
モバイル端末をクリックすると、「暗い」背景が表示されます。この時点で、次のコードを CSS に追加する必要があります: <span style="font-size: 14px;"></span>
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}ログイン後にコピー
在移动端点击后 会出现”暗色”的背景，这时候我们需要在css加入如下代码即可： <span style="font-size: 14px;"></span>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
ログイン後にコピー
<span style="font-size: 14px;"></span>1. ページ ウィンドウはデバイスの幅に自動的に調整され、ユーザーがページを拡大縮小することを禁止します。
<meta name="format-detection" content="telephone=no" />
ログイン後にコピー
属性の基本的な意味:
content=”width=デバイス幅：
ビューポートのサイズを制御します。device-width はデバイスの幅です
初期スケール - 初期スケーリング
minimum-scale - ユーザーがズームできる最小スケール
最大スケール - ユーザーがズームできる最大スケール user-scalable - ユーザーが手動でスケーリングできるかどうか
<span style="font-size: 14px;"></span>2. ページ上の番号を電話番号として無視します
<meta name="format-detection" content="email=no" />
ログイン後にコピー<span style="font-size: 14px;"></span>3. Android プラットフォームでのメールアドレスの認識を無視します
<meta name="format-detection" content="email=no" />
ログイン後にコピー
<meta name="apple-mobile-web-app-capable" content="yes" />
ログイン後にコピー
4. webサイト ios safariのみ、アドレスバーを非表示にできるクイック起動方法をホーム画面に追加
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
ログイン後にコピー
5 safariの上部ステータスバーのスタイルのみ、ホーム画面にwebサイトを追加します。 ios
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
这里开始内容
</body>
</html>ログイン後にコピー<span style="font-size: 14px;"></span>6 . 404 リクエストを防ぐために、ファビコン アイコンを Web サイトのルート ディレクトリに保存する必要があります (これは fiddler を使用して監視できます)。次のようにリンクをページに追加する必要があります。 </h3><link rel="shortcut icon" href=" /favicon.ico"><p> <span style="font-size: 14px;"><link rel="shortcut icon" href="/favicon.ico"></span>
因此页面上通用的模板如下：
<span style="font-size: 14px;"></span>body{font-family: "Helvetica Neue", Helvetica, sans-serif;}ログイン後にコピー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
这里开始内容
</body>
</html>ログイン後にコピー
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}ログイン後にコピー
四、移动端如何定义字体font-family
<a href="tel:15602512356">打电话给:15602512356</a>
ログイン後にコピー
五：在Android或者IOS下 拨打电话代码如下：
<a href="sms:10010">发短信给: 10010</a>
ログイン後にコピー
六：发短信(winphone系统无效)
<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>
ログイン後にコピー
七：调用手机系统自带的邮件功能
1. 当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p>
ログイン後にコピー
2、填写抄送地址;
在IOS手机下：在收件人地址后用?cc=开头;
如下代码： <span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填写抄送地址</a></p>
ログイン後にコピー
在android手机下，如下代码： <span style="font-size: 14px;"></span>
<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
ログイン後にコピー
3. 填上密件抄送地址，如下代码：
在IOS手机下：紧跟着抄送地址之后，写上&bcc=，填上密件抄送地址 <span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
ログイン後にコピー
ログイン後にコピー
在安卓下;如下代码： <span style="font-size: 14px;"></span>
🎜🎜</ code>🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜 4. モバイル端末で font-family を定義する方法🎜🎜🎜 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜 5: Android または IOS で電話をかけるためのコードは次のとおりです: 🎜🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜 6: テキスト メッセージを送信する(winphone システムは無効です)🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜セブン: 携帯電話システムに付属の電子メール機能を呼び出します🎜🎜🎜🎜1 視聴者がこのリンクをクリックすると、ブラウザは自動的にデフォルトのクライアント電子メール プログラムを呼び出し、自動的に入力します。受信者ボックスの受信者のアドレスに入力します 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input::-webkit-input-placeholder{color:red;}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜 2. カーボンコピーのアドレスを入力します。🎜🎜🎜🎜 IOS 携帯電話の場合: 受信者アドレスの後に ?cc= を入力します。次のコード: 🎜🎜<code> 🎜🎜🎜input:focus::-webkit-input-placeholder{color:blue;}ログイン後にコピー
ログイン後にコピー
🎜🎜🎜input,textarea {
-webkit-appearance: none;
}ログイン後にコピー
ログイン後にコピー
🎜🎜🎜a, img {
-webkit-touch-callout: none;
}ログイン後にコピー
ログイン後にコピー
<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
ログイン後にコピー
ログイン後にコピー
4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p>
ログイン後にコピー
ログイン後にコピー
5、包含主题，用?subject=可以填上主题。如下代码：
<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p>
ログイン後にコピー
ログイン後にコピー
6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：
<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p>
ログイン後にコピー
ログイン後にコピー
7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码：
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p>
ログイン後にコピー
ログイン後にコピー
八：webkit表单输入框placeholder的颜色值改变：
如果想要默认的颜色显示红色，代码如下：
input::-webkit-input-placeholder{color:red;}ログイン後にコピー
ログイン後にコピー
如果想要用户点击变为蓝色，代码如下：
input:focus::-webkit-input-placeholder{color:blue;}ログイン後にコピー
ログイン後にコピー
九：移动端IOS手机下清除输入框内阴影，代码如下
input,textarea {
-webkit-appearance: none;
}ログイン後にコピー
ログイン後にコピー
十：在IOS中 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}ログイン後にコピー
ログイン後にコピー
二、calc基本用法
calc基本语法： <span style="font-size: 14px;">.class {width: calc(expression);}</span>
它可以支持加，减，乘，除; 在我们做手机端的时候非常有用的一个知识点;
优点如下：
1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。
2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。
浏览器的兼容性有如下：
IE9+，FF4.0+，Chrome19+，Safari6+
如下测试代码： <span style="font-size: 14px;"></span>
<p class="calc">我是测试calc</p>
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}ログイン後にコピー
以上がHTML5に関する知識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7513
15
7513
15
CakePHP チュートリアル
1378
52
1378
52
Steamのアカウント名の形式は何ですか
79
11
79
11
NYTの接続はヒントと回答です
19
64
19
64
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
