HTML布局排版手機上瀏覽的網(wǎng)頁

印度阿三17 2019-08-21

展開全文

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

集中打印的大體方法是通過一臺windows電腦作為云主機，然后手機等通過瀏覽器訪問狀態(tài)windows云主機上的打印機進行打印。廣域網(wǎng)AO打印的端橋打印方式，是通過一臺windows云主機作為云服務(wù)器，然后需要打印的客戶端也需要一臺windows電腦安裝c-lodop并開啟端橋，指向那臺云服務(wù)器，實際打印端是在windows端橋端。
由于c-lodop只能安裝到Windows系統(tǒng)上，且用的是按照到windows系統(tǒng)的打印機，所以雖然是手機打印，上述兩種方法也需要借助windows完成，只有特殊AO打印機那種，不需要端橋的打印端windows系統(tǒng)，可直接發(fā)送到特殊AO打印機。（普通打印機只能用端橋模式或集中打印模式），以前的相關(guān)博文：c-lodop云打印實現(xiàn)手機打印 JS語句打印、

普通網(wǎng)頁是針對電腦進行設(shè)計的，用手機的瀏覽器瀏覽的時候，經(jīng)常還需要放大等操作，手機一般是點兩下，或者兩個手指向外滑動放大網(wǎng)頁。
個人測試了下讓網(wǎng)頁里的元素本身變大，在手機瀏覽時會好一些。
做了個很簡單的頁面測試，頁面本身是一個按鈕一個文本框，打印的內(nèi)容是一個圖片加一個文本，模擬用手機打印一個名片，變大的方法就是加大字體，加大寬高，中間遇到要用textarea文本框，這個文本框中的文本，也可以直接通過加字體大小樣式，改變輸入的文字大小，改變字體大小后，對應(yīng)的寬高也會改變，比如行是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="點擊預(yù)覽" 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>

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

如圖可以看出，遠(yuǎn)程預(yù)覽窗口和本地預(yù)覽窗口是不同的，c-lodop可以支持遠(yuǎn)程預(yù)覽。

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