❶ 為什麼我移動端頁面里的的div的設置overflow:auto;當內容超出時,不會局部滑動,手指一滑就整個頁面向下滑
overflow:auto;的前提是如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘的內容。
❷ 通過手機點了這個鏈接之後可以跳轉到微信支付,這個源碼怎麼寫
你需要現在微信開個介面,這是要工商局認真的。不懂再問哈
❸ 為什麼微信內置瀏覽器(X5內核)不支持@font-face
我在做針對微信的HTML5應用, 目前遇到的幾個問題是
一. 安卓版微信直接調用系統瀏覽器內核, iOS則是調用safari, 所以要使用新特性, 只能升級系統了, 對於很多老系統, 新的特性是沒法用的, 就連基本的canvas, toDataURL 在4.4 以下是不能導出 image/jpeg 格式的, 直接導出的 png格式, 往往非常大, 好幾百K,
二. localStorage等, 是可以用, 但是據說有微信退出之後就被清空的問題.
三. 據 Sencha 項目的調研顯示, 目前最適合 HTML5 項目的是 iOS 平台,我親測, 確實如此, 比如一個基本的css3 transition轉換做的圖片輪播, iOS上和原生應用基本沒啥區別, 安卓上則是卡的出奇, 而且安卓在進行一些復雜計算的時候,往往很慢, 比如涉及canvas計算的操作
四. 不好調試, 安卓上的調試, 我是裝chrome beta 32版 app, 然後結合桌面chrome通過 USB 開啟遠程調試, 但是由於兩者的 webkit 版本不同, 調試的結果往往不能作為最終參考依據. 說實話有時候有問題只能靠猜了(看你基本功扎實與否, 對css盒模型理解的徹底與否, 對js 的開發理解的深入與否,都能很大程度上提升你"猜對"的幾率, 當然, 你最好祈禱你的人品值是夠用的, 否則一弄一上午時間真的不算什麼), 別忘了 try catch 和 alert, 你會發現你現在真的是愛上它們了... 安卓上的另一種調試方式是通過 ADB 過濾控制台日誌的方式, 可以追蹤程序錯誤, 這個有些復雜,我還沒試過. iOS 也是可以通過 safari進行遠程調試的, 前提是你需要在MAC上進行操作, 我沒有MAC, 沒試過.
五. 對於開發, 優雅降級與漸進增強將會是個很好的理念, 你 可以 try { 先進API} catch(e) { 老舊的實現方式} 這種方式, 確保在別人刷機到新ROM之後就還能用舊版實現方式,(事實上我沒有搞, 真是復雜,很累了每天, 埋了顆雷, 我的4.1 在4.4將會爆掉, 別告訴我老闆...)
六. 用網路目前可能還得不到很多有用的信息, 國內目前HTML5還處於炒概念的階段, 很少有人做一些實打實的事情, 別告訴我誰用了什麼API做了什麼花出來了, 那些API都明擺在那裡, 稍微有點編程常識的都能拿來用, 關鍵是一個實現, 其實是 一個API ,外加你要修復9個bug, 這種方式來完成的, 只懂那一個 API, 是不夠的,現在.
七. 你的程序運行速度與你腳本和css3使用量成反比, 與網速成正比. 所以, 少用腳本, 簡化邏輯, 慎用css3, 壓縮圖片, 代碼, 等等, 這些仍然很重要.
八. 你會漸漸發現, 你進入了另一個 ie6 的世界, 移動開發基本是webkit 的天下, 比如我現在, 就沒考慮過 wp, 當然, 這也是基於公司的要求來的.
九. 有的人把 HTML5 理解為幾個 背景漸變的圓角陰影按鈕, 如果真是這樣認為的話, 那他現在就可以開始開發了, 這些基本的支持, 還是有了的.
十, caniuse.com, mobilehtml5.org, google.com, stackoverflow.com, 都是很有用的網站.
❹ 關於Div的overflow屬性的一些理解
前段時間做一個頁面的時候,遇到一些樣式上的問題:由於layout的關系,在我需要顯示最外div橫向滾動條和縱向滾動條時,遇到了一些阻礙,因此也藉此機會,研究了一下div的overflow屬性,下面給大家分享一下:
1.overflow屬性多用於div,其作用是:規定當內容溢出元素框時發生的事情;
2.所有主流瀏覽器都支持 overflow 屬性,因此可以放心使用;
3.overflow可分別設置x軸或者y軸(即overflow-x:,overflow-y:),也可以對兩者同時進行設置(overflow:)
4.overflow有以下這些屬性:
visible 默認值。內容不會被修剪,會呈現在div之外。
hidden 內容會被修剪,並且其餘內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。(註:所有IE瀏覽器都不支持inherit屬性)
普遍來說,auto屬性比較常用,一般y軸都會生成滾動條,而x軸的滾動條並不多見。特別是使用了bootstrap等框架後,利用其分欄功能搭建的div,會有效利用瀏覽器的橫向寬度(將100%的寬度等分成12格,如果一行排列的元素超過12格,則會自動換行),因此一般不會出現橫向滾動條。
我上面說到遇到的具體問題是這樣的:我的頁面布局,是比較常見的,最外層是一個大div,當中的上部是設置菜單,左下是真正的菜單,右下是主體內容顯示區域。我現在需要在右下的主體內容區域中做一個頁面,這個頁面會顯示sql查詢語句返回的內容,動態生成一個table,這個table的寬度可能會非常寬,因此我需要顯示x軸滾動條。
如果單純顯示右下div的滾動條,那會有一個問題:如果頁面高度很高(sql返回的結果數較多),則必須要將頁面y軸滾動條拉動之最底端,才能看到x軸的滾動條,這顯然是非常不方便的。
如果光設置最外層div的滾動條,則y軸會出現兩個滾動條,這也是不能接受的。
最終的方案是這樣的:
右下的div,overflow設置成visible,最外層的div,overflow設置成auto(當然,這只是針對我這個特殊的頁面,因此直接在view里重寫並覆蓋html和body的overflow屬性,其餘頁面不受影響)
大家可以根據自己的實際需要,試著調整一下overflow的屬性,多試幾次,自然會理解這幾個屬性的作用的區別了。
❺ 【HTML5】video 在不同平台下的差異性
【微信瀏覽器,自動全屏,目前沒有比較好的解決方案,不過如果安裝了qq瀏覽器,微信瀏覽器可以使用自帶的小窗功能】
同樣是套一層div, 然後移動div介面。 但是在移動端會存在一個問題, 就是 video播放之後,會變成在頂層。那麼如果是小窗播放, 如何關閉窗口呢? 那就要在 包 video的div容器外部 添加一個按鈕, 並且讓 讓 div容器 overflow:hidden;
大概是這樣的
給Iframe設置這些屬性即可 allowfullscreen="" allowfullsreen="true" webkitallowfullscreen="true"
❻ 微信登錄報錯:redirect_uri域名與後台配置不一致,錯誤碼10003
我們可以根據微信的開發者文檔 http://mp.weixin.qq.com/wiki/17/.html
網頁授權獲取用戶驗證這一章來排除錯誤原因。
如果確定appid等參數值沒有出錯 ,那麼很大可能就是你的微信公眾號後台的 網頁授權網址沒有填寫或者填寫的不正確 。
1、在微信公眾號請求用戶網頁授權之前,開發者需要先到公眾平台官網中的開發者中心頁配置授權回調域名。
2、授權回調域名配置規范為全域名,比如需要網頁授權的域名為: www.qq.com ,
配置以後此域名下面的頁面 http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑒權。
但 http://pay.qq.com 、 http://music.qq.com 、 http://qq.com 無法進行OAuth2.0鑒權
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">
搞了半天,才發現原來網頁授權網址必須和redirect_uri的全域名要一樣。 比如 網頁授權網址填的是 qq.com , redirect_uri寫 www.qq.com/callback_uri 這樣也會報錯。 </pre>
❼ 如何設置微信瀏覽器滾動事件觸發事件
開始以為可以直接用滑鼠事件,沒想到不能直接用,找了一個jquery mobile,不大會用,只能上網找現成的代碼,小有心得,終於做好了。
稍微改一下,就實現了你說的功能,主要是阻止瀏覽器的body默認事件,不然在移動頁面的時候會屏蔽掉相關的 js 事件,再自定義start、move、end幾個方法,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no">
<title>playSound</title>
<style type="text/css">
*{margin: 0;}
body{height: 1000px;}
#a{
height: 200px;
background: #f0f0f0;
position: relative;
overflow: hidden;
}
#b{
background: #ddd;
line-height: 200px;
height: 200px;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
#b.ease{
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
#c{
position: relative;
height: 40px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
line-height: 40px;
width: 100%;
overflow: hidden;
}
#d{
width: 20000px;
height: 40px;
position: relative;
overflow: hidden;
}
#e{
float: left;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="a">
<div id="b">移動我吧</div>
</div>
<div id="c">
<div id="d"><div id="e">jkasjdf jadfas aos as asio asi as a asd asdjasdj asjfas oasjpf aasfjf aosfpao poafpoasf oasjkpf s ioasdfias aio faio aio ioa ioa ioa ioa oa ioa oas ioadioasdasjdioafg a jdfjia oaa aioasdio asio ioasdiodasioddasiof ioasfio asioaiodfh nyarf hu yasf 8a ffha fau fasuifhasuifaf a fadifg</div></div>
</div>
<script type="text/javascript">
/*兼容pc & mobile*/
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";
var a = document.getElementById('a');
var body = document.getElementsByTagName('body')[0];
var xSlide = 0;
var yBody = 0;
/*滑塊*/
a.addEventListener(tapstart,tapdownHandler); //綁定按下去的事件
function tapdownHandler(event){
event.preventDefault(); //阻止默認事件
body.removeEventListener(tapstart,tapdownBody);
$('#b').removeClass('ease');
xSlide = hastouch?event.targetTouches[0].pageX-$('#a').offset().top:event.pageX-$('#a').offset().top;
a.addEventListener(tapmove,tapmoveHandler);
a.addEventListener(tapend,tapendHandler);
}
function tapmoveHandler(event){
event.preventDefault(); //阻止默認事件
var x = hastouch?event.targetTouches[0].pageX-$('#a').offset().left:event.pageX-$('#a').offset().left;
var left = (x - xSlide) + 'px';
$('#b').css('left', left);
}
function tapendHandler(event){
body.addEventListener(tapstart,tapdownBody);
a.removeEventListener(tapmove,tapmoveHandler);
$('#b').addClass('ease').css({'left': 0,'top': 0});
}
❽ Win7瀏覽器提示stack overflow at line:0該如何處理
1、打開瀏覽器,找到齒輪狀的設置,選擇工具中的Internet選項,
2、切換到高級設置,將其中的禁用腳本調試選項進行設置,在前面打鉤,
打開系統的運行窗口:
1、在窗口中輸入REGSVR32 URLMON.DLL,確定之後重新啟動電腦,
2、打開電腦之後,再次打開Internet選項,切換到程序設置中,將web瀏覽器的界面設置為默認值,如圖所示。
以上是Win7瀏覽器提示stack overflow at line:0的處理辦法,讓用戶正常的瀏覽網頁。
❾ 蘋果的微信裡面有個雙擊滾動頁面,怎麼禁用掉。現在的網頁是適配屏幕的,已經占滿了整個頁面,但是在蘋果
上次也遇到了,找了好長時間也沒有找到解決辦法,後來突然想到可以用setInterval時時檢測滾動條距離,然後試了一下可以,後來就用它了。雖然這個辦法有電笨,但是沒有找到更好的辦法之前可以試試。