ホームページ > 記事 > ウェブフロントエンド > モバイル Web ページのレイアウト エクスペリエンス summary_html/css_WEB-ITnose
モバイル Web ページのレイアウト エクスペリエンス summary_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:191292ブラウズ
はじめに
ご存知のとおり、今日のモバイル インターネットの普及により、基本的にすべての若者が携帯電話を使用して Web サイトの情報を閲覧したり、携帯電話を使用してショッピング サイトで商品の支払いをしたことがありますが、そのような Web ページがどのように変更されるかについて考えたことはありますか?今日はこの問題について説明します
読者は基本的な知識を持っている必要があります
1. HTML と CSS の使用に習熟していること
2. HTML5 と CSS3 を深く理解している必要はありません
3.および jquery スクリプト言語
上記の基本的な知識がない場合は、オンラインで他の関連する教育投稿を探すことをお勧めします。そうしないと、次の学習についていけない可能性があります
HTML の特殊な使用法
まず、HTML の特殊な構文について説明します。HTML を初めて使用する方はこれまで見たことがないかもしれませんが、専門家の方はこのモジュールをスキップしてください
次に、この図から始めましょう:
この写真は皆さんもご存知かと思いますが、これは淘宝網のタイトルバーです。ここで非常に目を引くのがこのアイコンです。これがどのように作られているかご存知ですか?
まず、淘宝網のロゴアイコンを準備する必要があります。これは、Baidu のダウンロード アドレスから直接ダウンロードできます
ダウンロードが完了したら、画像の形式を ico 形式に変換する必要があります。変換ツールをオンラインで使用します。アドレス
が生成されたら、画像をダウンロードし、名前を taabaoLogo に変更して、新しい HTML プロジェクトを作成します。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" ></head><body> </body></html>
操作の結果は次のとおりです。
この例から、この効果はステートメントに基づいて達成できることがわかりますが、実際の使用では、別のステートメントを追加する必要があります。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"></head><body> </body></html>実行中の効果は次のとおりです。同じです
ここで、注意深い読者は、効果は同じであるため、なぜわざわざこれを行う必要があるのかを尋ねるかもしれません。詳細については、この記事を参照してください。したがって、ここで冗長にする必要はありません
一般的に、このロゴは。アイコンはタイトルに使用するだけでなく、配置することもできます お気に入りに使用するには、追加されたタイトルバーの rel="短いアイコン" を rel="ブックマーク" に変更するだけです
<link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">モバイルウェブの制作にページでは、通常、ユーザーがページのサイズを手動で変更することを許可していないため、次の文を追加する必要があります
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">モバイル ページを作成する場合は、上記の文に加えて、次の文も追加する必要があります
<!--开启对web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /><!--主要是正对苹果手机将数字自动识别为号码--> <meta name="format-detection" content="telephone=no" />さらに、その他の属性は自由に選択できます
<!-- 忽略识别邮箱，主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址--><meta content="email=no" name="format-detection" /><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /><!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --><!-- 针对手持设备优化，主要是针对一些老的不识别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">スクロール バーのスクロール値を取得します
window.scrollY window.scrollX
デスクトップ ブラウザでは、スクロール バーの値は document.scrollTop と document.scrollLeft を通じて取得されますが、iOS では次のことがわかります。これら 2 つのプロパティが定義されていないのはなぜですか? iOS にはスクロール バーの概念がないため、Android では通常、これら 2 つのプロパティを通じてスクロール バーの値を取得できます。では、iOS ではどのようにスクロール バーの値を取得するのでしょうか。上記の2つの属性ですが、Androidでもこの属性をサポートしていることが判明したので、単純にwoindow.scrollを使用しますユーザーによるテキストの選択を禁止します
-webkit-user-select:none
この属性は、ユーザーによるテキストの選択を禁止しており、AndroidとAndroidの両方で有効ですAppleボックスサイジングについて簡単に説明しましょう
この属性は CSS3 で新たに追加されたものなので、皆さんには馴染みがないかもしれませんが、通常では実現するのが難しい効果を実現するために設定されています
。例: モバイル レイアウトの場合、通常、Web ページを適応的に処理するためにパーセンテージを使用します。これをアダプティブ レイアウトと呼びます。効果を左右に 1 ピクセルずつインデントしたい場合があります。自動 レイアウトに適応すると画面が引き伸ばされ、結果として水平スクロール バーが表示されます。これはモバイル Web ページを開発する場合にはタブーであるため、現時点ではボックス サイズ設定によって問題が解決されます。具体的な文法の詳細については、http: / /www.w3school.com.cn/cssref/pr_box-sizing.asp
box-sizing 属性から、box に関連する別の属性を考えます。それが box-shadow です
box-shadow
これは属性ですがモバイル Web ページではあまり一般的ではありませんが、モバイル Web ページでは比較的一般的ですが、この機能が導入されてから、Wangmen は特定の要素を作成できるようになりました。 Web ページをより 3 次元化し、以前は実現できなかった効果を実現します。詳細については、http://www.w3school.com.cn/cssref/pr_box-shadow の代わりに、ASP
base64 でエンコードされた画像を参照してください。 URL 画像
Web ページの読み込み時にすべての画像に HTTP リソース リクエストが必要なため、画像は 1 回のリクエストのトラフィックを削減するためにエンコードされ、それによって Web サイトの読み込み速度が向上します。これはオンライン コーディングを使用して実現できます。ツール、アドレス:
http://www.fishlee.net/Tools/GetImageBase64Code#codeResult
手机拍照和上传图片
在HTML5中支持一些移动的新特性
移动端特殊的事件
在HTML5出现之后，有一些新的事件
- touchstart //当手指接触屏幕时触发
- touchmove //当已经接触屏幕的手指开始移动后触发
- touchend //当手指离开屏幕时触发
- touchcancel//当某种touch事件非正常结束时触发
执行事件的顺序：touchstart>touchmove>touchend>touchcanel>click
从上面的顺序我们不难分析出：在点击的时候，click会发生延迟，这样的延迟一般是300ms。
手机图片和视频上传
<!-- 选择照片 --><input type=file accept="image/*"><!-- 选择视频 --><input type=file accept="video/*">
移动端不同的input对应不同的键盘
ios —- android
type email
type url
type search
动画特效开启加速
默认的移动浏览器是不会开启动画效果硬件加速的，但是这样的效果在低端的安卓手机中可能会出现意想不到的反效果
动画加速可以采用，下列代码
.div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */} 设置placeholder时候 focus时候文字没有隐藏
input:focus::-webkit-input-placeholder{ opacity: 0;} android局部滚动时隐藏原生滚动条
::-webkit-scrollbar{ opacity: 0;} 除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了，以后还会继续讨论下去
布局方法
在手机网页开发中，由于是基于webkit引擎开发的，所以我们可以大量的使用HTML5特性进行开发，布局上为了达到适屏的效果，我们需要进行采用的一般是百分比的布局，但是也是有一些布局较为特殊，这个我们就不讨论了，后续会有一篇讲解布局实例的文章，敬请期待
特别说明如需转载请注明出处，同时如果你觉得赞，请为我点一下“推荐”，你的鼓励是我前进的动力
参考文献
Meta 标签与搜索引擎优化
移动web问题小结