HTML布局排版手機上瀏覽的網頁


前面做個幾個簡單的測試html布局排版的頁面,都是在瀏覽器上查看的,C-LODOP可通過集中打印和廣域網AO打印方式,讓手機等也可以打印預覽和打印。

集中打印的大體方法是通過一台windows電腦作為雲主機,然后手機等通過瀏覽器訪問狀態windows雲主機上的打印機進行打印。廣域網AO打印的端橋打印方式,是通過一台windows雲主機作為雲服務器,然后需要打印的客戶端也需要一台windows電腦安裝c-lodop並開啟端橋,指向那台雲服務器,實際打印端是在windows端橋端。
由於c-lodop只能安裝到Windows系統上,且用的是按照到windows系統的打印機,所以雖然是手機打印,上述兩種方法也需要借助windows完成,只有特殊AO打印機那種,不需要端橋的打印端windows系統,可直接發送到特殊AO打印機。(普通打印機 只能用端橋模式或集中打印模式),以前的相關博文:c-lodop雲打印實現手機打印 JS語句打印

普通網頁是針對電腦進行設計的,用手機的瀏覽器瀏覽的時候,經常還需要放大等操作,手機一般是點兩下,或者兩個手指向外滑動放大網頁。
個人測試了下讓網頁里的元素本身變大,在手機瀏覽時會好一些。
做了個很簡單的頁面測試,頁面本身是一個按鈕一個文本框,打印的內容是一個圖片加一個文本,模擬用手機打印一個名片,變大的方法就是加大字體,加大寬高,中間遇到要用textarea文本框,這個文本框中的文本,也可以直接通過加字體大小樣式,改變輸入的文字大,改變字體大小后,對應的寬高也會改變,比如行是3,就是3個改后的較大字號的3行。
css樣式代碼:

body{margin:0px;font-size:50px;}
#bodyA1{background-color:#f1f3f5;}
#header{background-image:url(../images/topbg.png);width:100%;height:100px;}
#head1{background-image:url(../images/lodoptest.png);width:400px;height:100px;}
#footer{width:790px;height:100px;margin:auto;text-align:right;clear:both;}

.btn2 {background-color:#2175bd;border:none;color:white;padding:50px 50px;text-align:center;text-decoration:none;margin-left:5px;margin-top:60px;font-size:50px}

#textareadiv{float:left;width:500px;font-size:100px;margin-left:30px;margin-top:50px;}
#btn2div{float:left}
#S1{font-size:50px;}

頁面代碼:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<!--<script language="javascript" src="LodopFuncs.js"></script>-->
<script src='http://192.168.1.14:8000/CLodopfuncs.js'></script>
 <link href="css/phone1and.css" type='text/css' rel="stylesheet">     
</head>
<body id="bodyA1">
<div id="header">
<div id="head1"></div>
</div>

<div id="textareadiv">
<textarea rows="3" id="S1" cols="15"></textarea><br>
</div>

 <div id="btn2div">
 <input type="button" class="btn2" value="點擊預覽" onclick="card()">
 </div>

<div id="footer"><img src="./images/lodopfoot.png"></div>
<script language="javascript" type="text/javascript">   
        function card(){                        
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,"20cm","10cm","");
        LODOP.ADD_PRINT_IMAGE(0,0,"100%","100%","<img src='images/tu1.png'>");
        LODOP.ADD_PRINT_TEXT(124,167,285,78,document.getElementById("S1").value);
        LODOP.SET_PRINT_STYLEA(0,"FontSize",31);        
        LODOP.PREVIEW();
    };
</script>  
</body>

圖示:
該頁面的瀏覽器預覽和手機的瀏覽器預覽頁面
c-lodop的本地預覽窗口,手機上c-lodop的遠程預覽窗口
該打印的內容比較簡單,一個圖片和一個文本項。頁面是一個文本框和一個按鈕,模擬打印一個名片,實際的名片內容很多,弄復雜的名片太花時間,這里只是做測試,所以簡略。

如圖可以看出,遠程預覽窗口和本地預覽窗口是不同的,c-lodop可以支持遠程預覽。

測試途中遇到點小問題,這個網站是自己電腦當作服務器,發布到內網自己訪問測試的,途中用手機點打印預覽的打印總是彈出一個放大的部分。訪問c-lodop自己的歡迎頁面的預覽,點預覽的打印也是這個效果,可能和手機有關,之后用其他手機瀏覽器測試,也是這樣。
再之后我用直接打印測試了下,直接打印是正常的,手機點直接打印按鈕,電腦上彈出虛擬打印機的保存框(模擬的是集中打印模式,用的虛擬打印機)。
比較奇怪,刷新幾次,點了幾次之后又正常了,點打印預覽可以彈出選擇打印機等的彈窗。
這個問題可能和自己的手機有關,手機上可能有什么點擊放大的功能之類的被啟動了,后來又好了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM