WebApp的前端所遇问题
2015年10月1日至10月25日，兩個本科生和一位研究生以及一位老師組成四人團隊，開發某教育前端項目
所遇問題總結以及分享：
?
一、主要應用軟件：sublime_text HBuilder
?
初學者可以在JQuery mobile的Demo中尋找代碼（可以看圖找代碼仿寫）
1.回退按鈕設置： <a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false"><img src="img/arrow.png" id="img_arrow"></a>
效果圖：
?
加上style的屬性即可，去掉加載圖片的背景顏色,前提是PS時將圖片設置成透明背景
?
遇到分隔線的情況：
可以類似，使用兩個div去分隔開，比使用margin-top或直接加入圖片的方法更為簡單
<div class="ui-grid-c" >
<div class="ui-block-a"><span></span>
<br><span >超越全校學生</span></div>
<div class="ui-block-b"><span></span>
<br><span >超越全市學生</span></div>
<div class="ui-block-c"><span ></span>
<br><span></span></div>
<div class="ui-block-d"><span> </span>
<br><span></span></div>
</div>
?
2.文字縮放問題：</html>之后加上
加上jQuery.fontFlex.js文件
頭部加上：
<script src="js/jQuery.fontFlex.js"></script>
</html>之后加上 :
<script type="text/javascript">
$(function() {
// All elements
$('body').fontFlex(10, 18, 30);
$('#img_arrow').fontFlex(10 , 30, 70);
// H1 only
$('h1').fontFlex(15, 40, 60); });
</script>
?
加上javascript的腳本即可解決文字隨瀏覽器大小自動改變
?
3.ExamCompare中繪圖多次渲染解決方案
網址：
http://www.4byte.cn/question/455962/android-webview-html5-canvas-error.html
?
?
4.頁面跳轉問題加上data-ajax="false"
<a href="javascript:history.back(-1);" style="background:none;box-shadow:none;border:none;" data-ajax="false">
網址：
http://zhidao.baidu.com/link?url=GgSKh384-vVFvUDrL3UlPiL7OmVdLo5rOAQBwiyzabn4WhtogYFoNRHTMbrdcak_qFO6izpYADo5D9_DalxWP7RHy5Qr2Uqbf5mnaB7Lujy
?
頁面跳轉時應該加上data-ajax="false"，否則計算機上瀏覽器可以完美返回，到手機端著無法實現返回功能
5.alert在手機中改為無法被識別必須改為confirmJQM
JS文件夾中加入JQuery.Alert.js文件
<head>中加上：
<script src="js/JQuery.Alert.js"></script>
附件為用jquery寫的提示框代碼，請將此JS文件放入到js文件夾，并在head部分聲明引用。
其后即可將每個javascript中出現的alert 替換為confirmJQM即可。
?
alert只能在計算機中實現，到在手機端中必須將alert改為confirmJQM
?
轉載于:https://www.cnblogs.com/boycelee/p/4926588.html
總結
以上是生活随笔為你收集整理的WebApp的前端所遇问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cocos2d-x Lua与OC互相调用
- 下一篇： dragloader.js帮助你在页面原