前面做个几个简单的测试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自己的欢迎页面的预览，点预览的打印也是这个效果，可能和手机有关，之后用其他手机浏览器测试，也是这样。
再之后我用直接打印测试了下，直接打印是正常的，手机点直接打印按钮，电脑上弹出虚拟打印机的保存框（模拟的是集中打印模式，用的虚拟打印机）。
比较奇怪，刷新几次，点了几次之后又正常了，点打印预览可以弹出选择打印机等的弹窗。
这个问题可能和自己的手机有关，手机上可能有什么点击放大的功能之类的被启动了，后来又好了。

HTML布局排版手机上浏览的网页的更多相关文章

  1. vue-cli 手机上浏览自己的项目

    首先我们需要更改config文件 拿我这个项目举例子,config文件下的index.js内的dev下的host需要更改为自己的电脑IP 其次,重点来了,我们需要更改路径,细节的为什么我还解释不来,简 ...

  2. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  3. 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）

    转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...

  4. ActionBar-PullToRefreshLibs+沉浸式在部分手机上的布局错乱,目前知道的三星

    前段时间看见ActionBar-PullToRefreshLibs用来刷新很好看,配合4.4以上支持的沉浸式效果更佳,于是便想配合沉浸式+ActionBar-PullToRefreshLibs做出一个 ...

  5. 调试手机上网页 (断点 console timeline 选择dom)

    用手机看网页,越来越多,手机app套个webview的也很多,那该如何调试手机上的页面了?比如 断点,选dom,console,控制台输出,查看内存,== 嗯,万能的的chrome和safari还是帮 ...

  6. 远程调试Android手机上网页的记录

    1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ...

  7. 我手机上常用的app和常访问的网站

    ====常用======Opera Mini browser 浏览器(版本26.0.2254.117241以上) 老版本7.7最最经典, 但该版本在新的安卓手机上总有部分区域显示空白. 现在的 Ope ...

  8. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  9. 如何在 Android 手机上实现抓包？

    如何在 Android 手机上实现抓包? http://www.zhihu.com/question/20467503 我想知道某个应用究竟在数据提交到哪里,提交了什么.网上的教程太复杂,不想麻烦.有 ...

随机推荐

  1. mysql数据库从一台服务器迁移到另一台服务器上

    一.应用场景      由于要把测试服务器上的数据库迁移到正式服务器上,因此需要做数据库的迁移.这里记录一下. 二.数据库迁移1.新建数据库test create database test;12.进 ...

  2. C# winform Panel 添加 滚动条

    Detailed discussion here. Try this instead for 'only' scrolling vertical.(auto scroll needs to be fa ...

  3. java使用freemark生成word/pdf

    目录 一. 背景 二.实现的技术选型以及遇到的坑 三.最终的效果 2.1 .doc word效果展示 2.1 .docx word效果展示 2.2 docx word转pdf效果展示 三.准备工作及代 ...

  4. MySQL数据库入门——多实例配置

    前面介绍了相关的基础命令操作,所有的操作都是基于单实例的,mysql多实例在实际生产环境也是非常实用的,因为必须要掌握 1.什么是多实例 多实例就是一台服务器上开启多个不同的服务端口(默认3306), ...

  5. linux设置定时任务的方法步骤

    一,首先登录 二,找到文件夹 三,查看定时任务 crontab -l 四,vi root 编辑定时任务 编辑完成后,点ESC,然后:wq 时间格式 分钟 小时 日期 月份 周 命令 数字范围 0-59 ...

  6. web 安全登录算法

    摘自:http://hi.baidu.com/weiqi228/blog/item/922e961bbcc2c0188618bfb5.html 对于 Web 应用程序,安全登录是很重要的.但是目前大多 ...

  7. vue+vue-resource设置请求头(带上token)

    前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...

  8. Kafka - 环境搭建

    一.概述 Kafka(官网地址)专为分布式高吞吐量系统而设计. Kafka往往工作得很好,作为一个更传统的消息代理的替代品. 与其他消息传递系统相比,Kafka具有更好的吞吐量,内置分区,复制和固有的 ...

  9. Git的使用(6) —— 自动填写远端Git用户名密码

    1. 问题描述 公司项目组用私服的Git远程版本库,每一次推送和拉取服务都需要输入用户名和密码,过于繁琐. 2. 解决方法 Windows系统提供了"管理Windows凭据"的功能 ...

  10. 小福bbs-冲刺集合

    [小福bbs-冲刺集合] 一 . 7次团队冲刺博客的链接 第①次冲刺链接 第②次冲刺链接 第③次冲刺链接 第④次冲刺链接 第⑤次冲刺链接 第⑥次冲刺链接 第⑦次冲刺链接 冲刺的时间 日志博客的名称 当 ...