① 手機web版的頁面（html/css）怎麼兼容所有瀏覽器和各個手機屏幕解析度
你說的這個問題，應該算的上是手機適配的問題！
既然是手機web端頁面，這里的尺寸應該指的是瀏覽器的可視區域！
同樣是5寸屏，一些有問題一些木有問題。
那他們的不同點就在於瀏覽器的可視區域不一樣。
針對這類極小部分的適配問題。可以通過。css適配做出適當調整：
//手機瀏覽器是這個最大區域(可視區域375px)時，應用這個裡面的樣式
@mediascreenand(max-height:375px)
{
}
//手機瀏覽器是這個最小區域(可視區域375px)時，應用這個裡面的樣式
@mediascreenand(mim-height:375px)
{
}
//手機瀏覽器是這個最大區域(可視區域375px)介於345-75時，應用這個裡面的樣式
@mediascreenand(mim-height:375px)and(mim-height:775px)
{
}
具體你可以參考這個：
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/
② 求一個簡單的個人網頁html模板
這種模板很多的，網路打開一個網頁右鍵源代碼就能找到了。
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon">
<title>{dede:global.cfg_webname/}</title>
<meta name="keywords" content="{dede:global.cfg_keywords/}">
<meta name="description" content="{dede:global.cfg_description/}">
<link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"></script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"></script>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap
}
.iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
</style>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#openSidebar').click(function() {
jQuery('.wrapper').toggleClass('openNav');
});
jQuery('#menu a').click(function() {
jQuery('.wrapper').removeClass('openNav');
});
});
</script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"></script><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"></script><link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css">
<style type="text/css">
html,
body,
wrapper {
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="clearfix k1120">
<div class="navBox" id="openSidebar">
<a href="javascript:void(0)" class="navOpen"></a>
</div>
<div id="menu">
<ul class="clearfix">
<li><a href="#home" class="nav_home current"><span>首頁<br /><b>Home</b></span></a>
</li>
<li><a href="#services" class="nav_services"><span>服務范圍<br /><b>Services</b></span></a>
</li>
<li><a href="#case" class="nav_case"><span>案例展示<br /><b>Case</b></span></a>
</li>
<li><a href="#about" class="nav_about"><span>關於我們<br /><b>About us</b></span></a>
</li>
<li><a href="#news" class="nav_news"><span>新聞動態<br /><b>News</b></span></a>
</li>
<li><a href="#contact" class="nav_contact"><span>聯系我們<br /><b>Contact us</b></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="pageMain">
<div id="header">
<div class="k1120 clearfix"><a href="{dede:global.cfg_basehost/}" id="logo">logo</a>
</div>
</div>
<div id="home" class="scrol-page">
<div class="banner">
<div class="b_1" style="background-position: 50% 0px;">
<div class="k1120 clearfix">
<div class="b_pic">
<div class="mac" style="margin-top: 0px; opacity: 1;"><img src="{dede:global.cfg_templets_skin/}/images/mac.png">
</div>
<div class="iphone" style="margin-top: 0px; opacity: 1;"><img src="{dede:global.cfg_templets_skin/}/images/iphone.png">
</div>
<div class="ipad" style="margin-top: 0px; opacity: 1;"><img src="{dede:global.cfg_templets_skin/}/images/ipad.png">
</div>
</div>
<div class="b_text" style="margin-top: 0px; opacity: 1;">
{dede:global.cfg_ggg/}
</div>
</div>
</div>
</div>
<div class="banner">
③ 用JS和html怎麼做出一個簡單的聊天窗口（類似微信）
單純js和html無法實現通訊，需要搭建後台服務與前端WebSocket比較容易實現。
④ 如何建立一個html5 webscoket 實時語音聊天系統
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var wsServer = 'ws://localhost:9999/webSocket.ashx'; //基於.NET4.5伺服器地址
//var wsServer = 'ws://localhost:1818'; //基於.NET伺服器地址
var websocket = new WebSocket(wsServer); //創建WebSocket對象
//websocket.send("hello");//向伺服器發送消息
//alert(websocket.readyState);//查看websocket當前狀態
websocket.onopen = function (evt) {
//已經建立連接
alert("已經建立連接");
};
websocket.onclose = function (evt) {
//已經關閉連接
alert("已經關閉連接");
};
websocket.onmessage = function (evt) {
//收到伺服器消息，使用evt.data提取
evt.stopPropagation()
evt.preventDefault()
//alert(evt.data);
writeToScreen(evt.data);
//websocket.close();
};
websocket.onerror = function (evt) {
//產生異常
//alert(evt.message);
writeToScreen(evt.message);
};
function sendMsg() {
if (websocket.readyState == websocket.OPEN) {
msg = document.getElementById("msg").value;
websocket.send(msg);
writeToScreen("發送成功!");
} else {
writeToScreen("連接失敗!");
}
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML += message;
output.appendChild(pre);
}
</script>
</head>
<body>
<div>
<input type="text" id="msg" value="beyond is number one!" />
<button onclick="sendMsg()">send</button>
</div>
<div id="output"></div>
</body>
</html>
H5e實訓html5開發解答
⑤ 主流HTML5移動web開發框架
1.H5 做移動開發也分兩種，一種就是正常的網頁，一種是封裝的成 App 在手機上跑的。下面我只大致介紹一下又哪些框架，具體的特性不是三兩句能說完的，題主可以自行搜索相關資料。 後者比較知名的框架就是 PhoneGap、MUI 等等了。
2.而前者具體分的話還分 CSS 框架和 JS 框架。樣式框架有很多了，常見的有 jQuery Mobile、Bootstrap、Kendo UI、Amaze UI 等等。JS 框架一般是 AngularJS、Backbone、ReactJS 等等，但說實話這些 JS 框架都比較繁重，一般是為比較復雜的場景設計的，如果你的頁面需求很簡單，那麼大可以不用它們只用樣式框架就好了。
⑥ 手機端的頁面怎麼開發，和web html有區別嗎
兩者之間沒有區別。
有許多方法可以在手機上開發網頁。 目前，html5的發展還不夠平衡，導致主要瀏覽器對h5的支持不盡人意。 但是，其添加了@media屬性（屬於css3，html5和css3的名稱在這里沒有嚴格區分，實際上，是兩種不同的技術）。
從那時起，網頁創建可以根據用戶所持有的設備的像素寬度來識別是否正在使用行動電話，從而在用戶正在使用移動設備時下載移動頁面。 但是，其存在某些缺點。 在這個階段，手機的標准還很不規范。
(6)手機web聊天html模板擴展閱讀：
目前現階段的手機網頁開發，主要的手段是：
其一，在meta標簽中添加關於像素寬度的限制語句，然後實現css的相對寬度。 但是，界面會顯得雜亂無章，因此很少使用此方法。
其二，這種方法是最常見的。 網站頁面分為兩個部分，分別面向計算機和手機。 當用戶請求頁面時，標題信息用於確定其是否是計算機瀏覽器，然後針對不同的請求發送不同的網頁文件。 這樣的網頁通常不是靜態的。
另外，開發移動網頁時，可以使用Chrome的開發人員工具。 Chrome開發人員工具可以模擬手機頁面的開發，還可以模擬許多設備，方便用戶開發。
⑦ 怎麼實現網頁版的在線聊天啊，用html寫，求源代碼
這純html是寫不出來的 要後台程序語言寫 你可以去網上下載一個 有很多