HTML5手機端網頁開發

阿新 • • 發佈：2019-01-13

<html lang="zh-cn" style="font-size: 64.6875px;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>模擬交易移動端</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<!-- 彈窗引用 -->
<link rel="stylesheet" href="js/alert/common.css">
<link rel="stylesheet"
	href="js/alert/SyntaxHighlighter/shCoreDefault.css">
<link rel="stylesheet" href="js/alert/alert.css">
<link rel="stylesheet" href="js/alert/style.css">


<!-- <script type="text/javascript">
	//html root的字型計算應該放在最前面，這樣計算就不會有誤差了/
	//2016.3.23 wjq update 之所以要加個判斷返回一個20.5，是因為當用戶在谷歌等瀏覽器直接輸入手機端網站網址時，如果使用者設定模組自定義樣式的高度比較小，由於這時候的clientWidth為1920px，及返回的_htmlFontSize為40，這時候就會使模組太小，展示不完全，因此先取一個較為準確的值去展示。Mobi.resetHtmlFontSize()順便也加了
	var _htmlFontSize = (function() {
		var clientWidth = document.documentElement ? document.documentElement.clientWidth
				: document.body.clientWidth;
		if (clientWidth > 640)
			clientWidth = 640;
		document.documentElement.style.fontSize = clientWidth * 1 / 6.4 + "px";
		return clientWidth * 1 / 6.4;
	})();
</script> -->

<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript">
	var phoneWidth = parseInt(window.screen.width);
	var phoneScale = phoneWidth / 640;
	var ua = navigator.userAgent;
	if (/Android (\d+\.\d+)/.test(ua)) {
		var version = parseFloat(RegExp.$1);
		if (version > 2.3) {
			document
					.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
		} else {
			document
					.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
		}
	} else {
		document
				.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
	}
</script>
</head>
<body class="html">
	<div class="main">
		<div class="content">
			<div class="clearfix header text-center">
				<a class="pull-left img-l" href="#"><img class=""
					src="images/left.jpg" alt=""></a>
				<div class="head-tt">{{room.title}}</div>
			</div>
		</div>
		<div class="clearfix head-t1">
			<div class="pull-left">我的餘額：{{my.avamoney}}</div>
			<div class="pull-left" style="margin-left: 0.1rem;">盈虧：{{my.balance}}</div>
		</div>
		<div class="clearfix head-t2">
			<span>最新：{{md.lastPrice}}</span> <span>開盤：{{md.openPrice}}</span> <br>
			<span>最高：{{md.highPrice}}</span> <span>最低：{{md.lowPrice}}</span>
		</div>
		<img style="width: 100%;" src="images/01.jpg" alt="">

		<div class="bs-example bs-example-tabs bs-exa"
			data-example-id="togglable-tabs">
			<ul id="myTabs" class="nav nav-tabs nav-new" role="tablist">
				<li role="presentation" class="active"><a href="#home"
					id="home-tab" role="tab" data-toggle="tab" aria-controls="home"
					aria-expanded="false">交  易</a></li>
				<li role="presentation" class=""><a href="#profile" role="tab"
					id="profile-tab" data-toggle="tab" aria-controls="profile"
					aria-expanded="true">持  倉</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div role="tabpanel" class="tab-pane fade active in" id="home"
					aria-labelledby="home-tab">
					<div class="clearfix conts">
						<div class="text1">
							<span>手數：</span>
							<div id="num-1" data-value="1" class="form-control text-f1"
								@click="volumeCount(1)">1</div>
							<div id="num-5" data-value="5" class="form-control text-f1"
								@click="volumeCount(5)">5</div>
							<div id="num-10" data-value="10" class="form-control text-f1"
								@click="volumeCount(10)">10</div>
							<div id="num-15" data-value="15" class="form-control text-f1"
								@click="volumeCount(15)">15</div>
							<input type="number" name="volume" class="form-control text-f2"
								placeholder="手動輸入" v-model="order.num">
						</div>
						<div class="text1">
							<div class="text-con">
								<span>止損：</span> <input type="text" class="form-control text-f3"
									placeholder="請輸入點數" v-model="order.limitdown">
							</div>
							<div class="text-con pad2">
								<span>止盈：</span> <input type="text" class="form-control text-f3"
									placeholder="請輸入點數" v-model="order.limitup">
							</div>
						</div>
					</div>
					<div class="clearfix conts2">
						<div
							style="height: 1.3rem; line-height: 1.3rem; font-size: 0.5rem;">
							<!--class="text-con" class="paya1" -->
							<a class="paya1"> <span class="span-left"
								@click="buy" data-name="direction" data-value="1">買  漲</span>
							</a> <a class="paya2"> <span class="span-left"
								@click="sell" data-name="direction" data-value="-1">買  跌</span>
							</a>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="profile"
					aria-labelledby="profile-tab">
					<div id="myTabContent2" class="tab-content">
						<!-- 當前持倉 -->
						<div class="tablefilter clearfix">
							<div class="fr" style="margin-top: 0.2rem;">
								<form class="ng-pristine ng-valid">
									<button type="button" class="btn btn-danger"
										@click="closeall()" name="button" style="font-size: 0.5rem;">一鍵平倉</button>
								</form>
							</div>
						</div>
						<div class="bs-example" data-example-id="simple-table">
							<table class="table table-tt2" id="p-table"
								style="font-size: 0.4rem;">
								<thead>
									<tr style="text-align: center;">
										<th width="5%">合約</th>
										<th width="10%">手數</th>
										<th width="10%">買/賣</th>
										<th width="10%">價格</th>
										<th width="10%">盈虧</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(p,index) in positions" @click="rowClick(index)">
										<td>{{p.investorid}}</td>
										<td>{{p.num}}</td>
										<td>{{p.direct==0?'買':'賣'}}</td>
										<td>{{p.price}}</td>
										<td>{{p.balance}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!-- 交易明細 -->
					<div role="tabpanel" class="tab-pane fade" id="dropdown12"
						aria-labelledby="dropdown1-tab">
						<div class="tablefilter clearfix">
							<div class="fl">
								<div class="dib">
									<input checked="checked" id="D161filter-0"
										ng-click="selectOrder(0)" type="radio" name="filter" /> <label>全部</label>
								</div>
								<div class="dib">
									<input id="D161filter--1" ng-click="selectOrder(-1)"
										type="radio" name="filter"> <label>賣出</label>
								</div>
								<div class="dib">
									<input id="D161filter-1" ng-click="selectOrder(1)" type="radio"
										name="filter"> <label>買入</label>
								</div>
							</div>
						</div>
						<div class="bs-example" data-example-id="simple-table">
							<table class="table table-tt2" id="t-table">
								<thead>
									<tr>
										<th>時間</th>
										<th>合約</th>
										<th>手數</th>
										<th>開/平</th>
										<th>買/賣</th>
										<th>價格</th>
										<th>盈虧</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="t in trads">
										<td>{{t.uptime}}</td>
										<td>{{t.investorid}}</td>
										<td>{{t.num}}</td>
										<td>{{t.flag==0?'開':'平'}}</td>
										<td>{{t.direct==0?'買':'賣'}}</td>
										<td>{{t.price}}</td>
										<td>{{t.balance}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- 彈框 -->
				<!-- <div id="domset" class="modal fade" role="dialog"
					aria-labelledby="closeModal_title" aria-hidden="true">
					<div style="font-size:0.4rem;display:inline;">
						止盈：<input ref="input1" id="limitup1" name="volume" type="number" class="form-control text-f3"  placeholder="點數"/> 
						止損：<input	id="limitdown1" type="number" class="form-control text-f3" placeholder="點數"/>
						<button type="button" class="btnx btn-primary"
							@click="updateLimit(positionOrder)">設  置</button>
					</div>
					<br>
					<div style="font-size:0.4rem;display:inline;">
						平倉：<input id="closeNum1" type="text" class="form-control text-f3"  placeholder="不超過最大手數"/>
						<button type="button" class="btnx btn-primary"
							@click="close(positionOrder)">平  倉</button>
					</div>
				</div> -->
			</div>
		</div>
		<div class="foot">
			<a href="">首 頁</a> <a href="">線上客服</a> <a href="">使用者中心</a>
		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/scroll.js"></script>
	<script type="text/javascript" src="js/jquery.cxscroll.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="simtrad.js"></script>
	
	<!-- 彈窗元件 -->
	<script src="js/alert/SyntaxHighlighter/shCore.js"></script>
	<script src="js/alert/SyntaxHighlighter/makeSy.js"></script>
	<script src="js/alert/alert.js"></script>
	<script src="js/alert/alert-api.js"></script>

</body>
</html>

HTML5手機端網頁開發

<html lang="zh-cn" style="font-size: 64.6875px;"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c

HTML5手機端網站開發meta設定

前端在進行手機端頁面開發時，需要在頁面head中完成很多基本設定，確保頁面在手機端的顯示效果。在開發的過程中，是通過meta標籤的設定。1.viewport標籤<meta name="viewport" content="width=device-width, init

手機端網頁開發相容性指南

毫無疑問，隨著微信的崛起，移動端網頁開發又進一步，需求量不斷攀升。但是智慧手機市場的豐富多彩，百花齊放，導致移動端的網頁開發和傳統的 PC 端網頁開發有所不同。很多人可能正邁向手機端網頁開發，但又聽說手機端網頁開發有著這樣或那樣的問題，所以有些忐忑。這裡，

如何開發手機端網頁，如何讓網頁自適應？

現在是不是很明瞭了。現在我們來解析下，我們新增的這個meta標籤。首先，meta標籤儲存的是一些使用者不可見，但是瀏覽器可見的一些元資訊，一般以鍵值對的方式儲存。比如這個<meta name="viewport" content="width=device-width,initial-scale=1.0

手機端網頁web開發要點

頭部必須要加的 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 　　<meta name="viewport" content="width=device-

HTML5手機端開發－適配手機端瀏覽器1

1、如何網頁的寬度自適應螢幕？在head標籤裡新增以下程式碼: <meta name="viewport" content="width=device-width"/> 2、在

移動端頁面開發及傳統PC端網頁開發的異同

異同視頻分享圖片 ID 技術分享頁面開發 png width gif 2017年12月份在公司做過一次技術分享，轉眼間過去六個月了.... 今天在感嘆完時間的飛逝之後，拿過來在這裏分享一下吧，話題是：移動端頁面開發及傳統PC端網頁開發的異同，這個ppt

根據當前設備環境來做pc端和手機端網頁顯示

需要 err 網頁 nbsp android avi location ber 方法當你的網頁使用了兩套代碼（移動端和pc端代碼）來顯示你的網頁時，就需要用到這種方法：手機端： if (!/Android|webOS|iPhone|iPod|BlackBerry/i

手機端網頁根據螢幕大小自適應

做了一個適應所有手機端網頁螢幕的頁面，我這個頁面是使用的px轉換rem然後在每個頁面適配。首先新增移動端meta頭部，即： <meta name="viewport" content="width=device-width,height=device-height,inital-

HTML5 手機端圖片上傳預覽

1、html頁面 <div class="addFile"> <p class="company">資料上傳</p> <div class="photoes getoutinput"> <div class="uplist">

移動端網頁開發經驗與心得-解析度、內容與快取

智慧手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機效能，2g網路速度等網頁設計無非是藍、黑、白，介面單調，並且要儘可能的設計簡單。現在情況就大不相同了，軟體上webkit核心瀏覽器大行其道，硬體突飛猛進，網速

手機端網頁所有內容根據螢幕大小自適應(大小，位置)

之前一直都在做電腦端的網頁製作，幾乎沒有接觸過手機端的頁面開發，在我看來，開發手機端的頁面還不如直接用安卓原生或者react-native開發，但由於公司的需求，於是我只能硬著頭皮來解決。手機端的頁面需求大多數為：自動適應不同手機的螢幕，包括平板，

使用Flexible.js實現手機端網頁內容適配(rem適配法)

曾幾何時為了相容IE低版本瀏覽器而頭痛，以為到Mobile時代可以跟這些麻煩說拜拜。可沒想到到了移動時代，為了處理各終端的適配而亂了手腳。對於混跡各社群的偶，時常發現大家拿手機淘寶的H5頁面做討論——手淘的H5頁面是如何實現多終端的適配？那麼趁此Amfe阿里無線前端團

HTML5手機端拍照上傳

最近在嘗試做手機端拍照上傳的專案，之前用微信JS-SDK 發現有時候上傳照片會有問題，下載後的照片只有一半。所以改用了HTML5上傳，在做這一點上傳中也學習了一下JS和HTML5的一些標籤。記錄一下。首先需要在頁面新增HTML5控制元件 capture="camera

手機端網頁返回頂部js程式碼

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

html5手機端的點選彈出側邊滑動選單程式碼

1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="

移動端/PC端網頁開發建議

根據你的產品特點，進行兩種不同的設計，根據你的設計需求，選擇合適的技術方案。 A與B不是硬幣的正反面，它們為了解決同一個問題而生，它們是同一種思想的延伸。移動和桌面設計的差別遠不止是佈局問題。只要有足夠的程式設計量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主

html5手機端觸屏事件(touch事件)第二章

touchstart: // 手指放到螢幕上的時候觸發 touchmove: // 手指在螢幕上移動的時候觸發 touchend: // 手指從螢幕上拿起的時候觸發 touchcanc

手機端網頁點選連結觸發自動撥打或儲存電話的示例程式碼

通過網頁撥打電話 1 <a href=”tel://110 ”>撥打電話</a> 這種方式塞班、安卓與iphone都支援切記一定這這麼寫，不要自己寫方法再去呼叫例如;<a href=”javas

手機端網頁自適應解決方案

HTML5手機端網頁開發

相關推薦