PC端代码(当前只在电脑端显示)¶
本文档内容来源于 http://doc.myapps.cn/docs/common-script/common-script-1f1a4ifjvtuvb
脚本说明¶
该脚本用于检测设备类型，只在PC端（桌面浏览器）显示特定内容。在MyApps平台中，可以通过JavaScript检测用户设备类型，并根据检测结果显示或隐藏内容。
常见实现方式¶
方式1：使用JavaScript检测设备类型¶
(function(){
var html = "<script>" +
"function isMobileDevice() {" +
" return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);" +
"}" +
"if (!isMobileDevice()) {" +
" document.getElementById('pcContent').style.display = 'block';" +
"}" +
"</script>" +
"<div id='pcContent' style='display: none;'>" +
"这是仅在PC端显示的内容" +
"</div>";
return html;
})();
方式2：使用CSS媒体查询¶
(function(){
var html = "<style>" +
"@media (max-width: 768px) {" +
" .pc-only { display: none !important; }" +
"}" +
"@media (min-width: 769px) {" +
" .pc-only { display: block; }" +
"}" +
"</style>" +
"<div class='pc-only'>" +
"这是仅在PC端显示的内容" +
"</div>";
return html;
})();
方式3：检测屏幕宽度¶
(function(){
var html = "<script>" +
"function isPC() {" +
" return window.innerWidth > 768;" +
"}" +
"if (isPC()) {" +
" document.getElementById('pcContent').style.display = 'block';" +
"}" +
"window.addEventListener('resize', function() {" +
" if (isPC()) {" +
" document.getElementById('pcContent').style.display = 'block';" +
" } else {" +
" document.getElementById('pcContent').style.display = 'none';" +
" }" +
"});" +
"</script>" +
"<div id='pcContent' style='display: none;'>" +
"这是仅在PC端显示的内容" +
"</div>";
return html;
})();
方式4：检测触摸设备¶
(function(){
var html = "<script>" +
"function isTouchDevice() {" +
" return 'ontouchstart' in window || navigator.maxTouchPoints > 0;" +
"}" +
"if (!isTouchDevice()) {" +
" document.getElementById('pcContent').style.display = 'block';" +
"}" +
"</script>" +
"<div id='pcContent' style='display: none;'>" +
"这是仅在PC端显示的内容" +
"</div>";
return html;
})();
扩展示例¶
示例1：PC端显示复杂内容¶
(function(){
var html = "<script>" +
"function isMobileDevice() {" +
" return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);" +
"}" +
"if (!isMobileDevice()) {" +
" document.getElementById('pcContent').style.display = 'block';" +
"}" +
"</script>" +
"<div id='pcContent' style='display: none;'>" +
"<h3>PC端专用功能</h3>" +
"<p>这些内容只在PC端显示</p>" +
"<button onclick='alert(\"PC端按钮\")'>PC端按钮</button>" +
"</div>";
return html;
})();
示例2：PC端和移动端显示不同内容¶
(function(){
var html = "<script>" +
"function isMobileDevice() {" +
" return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);" +
"}" +
"if (isMobileDevice()) {" +
" document.getElementById('mobileContent').style.display = 'block';" +
"} else {" +
" document.getElementById('pcContent').style.display = 'block';" +
"}" +
"</script>" +
"<div id='pcContent' style='display: none;'>" +
"这是PC端显示的内容" +
"</div>" +
"<div id='mobileContent' style='display: none;'>" +
"这是移动端显示的内容" +
"</div>";
return html;
})();
示例3：响应式PC端内容¶
(function(){
var html = "<style>" +
".pc-only {" +
" display: none;" +
"}" +
"@media (min-width: 769px) {" +
" .pc-only {" +
" display: block;" +
" }" +
"}" +
"</style>" +
"<div class='pc-only'>" +
"<table style='width: 100%; border-collapse: collapse;'>" +
"<tr><th>列1</th><th>列2</th><th>列3</th></tr>" +
"<tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>" +
"</table>" +
"</div>";
return html;
})();
示例4：PC端显示表格¶
(function(){
var doc = getCurrentDocument();
var data = doc.getItemValueAsString("数据字段");
var html = "<script>" +
"function isPC() {" +
" return window.innerWidth > 768 && !/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);" +
"}" +
"if (isPC()) {" +
" document.getElementById('pcTable').style.display = 'table';" +
"}" +
"</script>" +
"<table id='pcTable' style='display: none; width: 100%; border-collapse: collapse;'>" +
"<tr><th>字段1</th><th>字段2</th><th>字段3</th></tr>" +
"<tr><td>值1</td><td>值2</td><td>值3</td></tr>" +
"</table>";
return html;
})();
示例5：PC端显示图表¶
(function(){
var html = "<script>" +
"function isPC() {" +
" return window.innerWidth > 768;" +
"}" +
"if (isPC()) {" +
" document.getElementById('pcChart').style.display = 'block';" +
" // 这里可以初始化图表库" +
"}" +
"</script>" +
"<div id='pcChart' style='display: none; width: 100%; height: 400px;'>" +
"<canvas id='chartCanvas'></canvas>" +
"</div>";
return html;
})();
示例6：PC端显示复杂表单¶
(function(){
var html = "<script>" +
"function isMobileDevice() {" +
" return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);" +
"}" +
"if (!isMobileDevice()) {" +
" document.getElementById('pcForm').style.display = 'block';" +
"}" +
"</script>" +
"<form id='pcForm' style='display: none;'>" +
"<div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px;'>" +
"<label>字段1: <input type='text'></label>" +
"<label>字段2: <input type='text'></label>" +
"<label>字段3: <input type='text'></label>" +
"<label>字段4: <input type='text'></label>" +
"</div>" +
"<button type='submit'>提交</button>" +
"</form>";
return html;
})();
示例7：PC端显示工具栏¶
(function(){
var html = "<script>" +
"function isPC() {" +
" return window.innerWidth > 768;" +
"}" +
"if (isPC()) {" +
" document.getElementById('pcToolbar').style.display = 'flex';" +
"}" +
"</script>" +
"<div id='pcToolbar' style='display: none; justify-content: space-between; padding: 10px; background: #f0f0f0;'>" +
"<button onclick='action1()'>操作1</button>" +
"<button onclick='action2()'>操作2</button>" +
"<button onclick='action3()'>操作3</button>" +
"</div>";
return html;
})();
示例8：PC端显示侧边栏¶
(function(){
var html = "<style>" +
".pc-sidebar {" +
" display: none;" +
" width: 200px;" +
" background: #f5f5f5;" +
" padding: 20px;" +
" float: left;" +
"}" +
"@media (min-width: 769px) {" +
" .pc-sidebar {" +
" display: block;" +
" }" +
"}" +
"</style>" +
"<div class='pc-sidebar'>" +
"<h4>侧边栏</h4>" +
"<ul>" +
"<li>菜单项1</li>" +
"<li>菜单项2</li>" +
"<li>菜单项3</li>" +
"</ul>" +
"</div>";
return html;
})();
示例9：PC端显示数据表格（完整示例）¶
(function(){
var domainId = getWebUser().getDomainid();
var sql = "SELECT id, item_字段1, item_字段2 FROM tlk_表单名 WHERE domainid = '" + domainId + "' LIMIT 10";
var datas = queryBySQL(sql);
var html = "<script>" +
"function isPC() {" +
" return window.innerWidth > 768 && !/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);" +
"}" +
"if (isPC()) {" +
" document.getElementById('pcTable').style.display = 'table';" +
"}" +
"</script>" +
"<table id='pcTable' style='display: none; width: 100%; border-collapse: collapse; border: 1px solid #ccc;'>" +
"<thead><tr style='background: #f0f0f0;'><th>ID</th><th>字段1</th><th>字段2</th></tr></thead>" +
"<tbody>";
if(datas != null && datas.size() > 0){
for(var it = datas.iterator(); it.hasNext();){
var data = it.next();
html += "<tr>";
html += "<td>" + data.getId() + "</td>";
html += "<td>" + data.getItemValueAsString("字段1") + "</td>";
html += "<td>" + data.getItemValueAsString("字段2") + "</td>";
html += "</tr>";
}
}
html += "</tbody></table>";
return html;
})();
示例10：PC端显示提示信息¶
(function(){
var html = "<script>" +
"function isMobileDevice() {" +
" return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);" +
"}" +
"if (!isMobileDevice()) {" +
" var notice = document.getElementById('pcNotice');" +
" notice.style.display = 'block';" +
" setTimeout(function() {" +
" notice.style.display = 'none';" +
" }, 5000);" +
"}" +
"</script>" +
"<div id='pcNotice' style='display: none; padding: 10px; background: #e3f2fd; border-left: 4px solid #2196f3; margin: 10px 0;'>" +
"这是PC端专用提示信息，5秒后自动隐藏" +
"</div>";
return html;
})();
关键检测方法说明¶
User Agent检测¶
function isMobileDevice() {
return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
屏幕宽度检测¶
触摸设备检测¶
CSS媒体查询¶
注意事项¶
- ⚠️ User Agent: User Agent可能被伪造，不是绝对可靠
- ⚠️ 屏幕宽度: 屏幕宽度检测可能不准确（浏览器窗口可能被调整）
- ⚠️ 响应式设计: 建议结合CSS媒体查询使用
- ⚠️ 性能考虑: 检测代码应该轻量，避免影响页面加载
- ⚠️ 兼容性: 确保检测方法在不同浏览器中正常工作
- ⚠️ 用户体验: 移动端用户也应该有相应的内容或提示
- 建议结合多种检测方法，提高准确性
- 可以使用CSS媒体查询作为主要方法，JavaScript作为补充
- 注意处理窗口大小变化的情况
使用场景¶
- PC端专用功能展示
- 复杂表格和图表显示
- 工具栏和侧边栏
- 数据分析和报表
- 高级操作界面
如需查看完整脚本代码，请访问源文档链接。