python flask 网页适应手机端浏览器的编程方法

1.使用flask在电脑端开发了一个论坛网址，想在手机端浏览看看，却发现根本装不下，并且导航栏元素还消失了。

先看电脑端访问是正常的

而手机端导航条不见了

#### 这是因为手机和电脑屏幕分辨率不同导致的。最简单的办法就是添加自适应宽度，并缩放页面。

<meta name="viewport" content="width=device-width, initial-scale=0.3">

这里宽度自适应，定义初始缩放值0.3，就是原来页面的0.3倍。 想详细了解可以看这篇博客：详解meta-viewport标签
不过，这样直接改电脑端页面显示效果就太小了，所以可以从新定义手机端的模板文件。

2.改写flask后端程序，适应电脑端和手机端，并自动渲染对应的模板文件

*首先加入手机端模板文件
之前的电脑端工程文件结构

加入手机端模板文件，m_ 代表移动端模板文件，注意必须在templates文件夹下。

3.在视图函数中选择渲染不同的模板文件

基本思路是 使用request.user_agent，得到访问的设备信息，我type了一下，好像没有具体类型，于是在这里先转为字符串处理。
基本的渲染思路如下：

if 'Android' in str(request.user_agent):
	return render_template("mobile.html")
else:
    return render_template("pc.html")

不过一旦要渲染的模板文件多了，这样写就显得不是很简洁。我是采用了自定义装饰器来简化’Android’ in str(request.user_agent)。

def Device_Identify(function):
     @wraps(function)
     def wrapper(*args,**kwargs):
        if 'Windows' in str(request.user_agent):
            device = 'Windows'
        if 'Android' in str(request.user_agent):
            device = 'Android'
        else:
            device ="Linux"
        setattr(g,"device",device) #给全局属性g绑定一个属性名为device，值为device对应的值
        return function(*args,**kwargs)
     return wrapper

这样，在其他视图函数下都可以使用，给g绑定的全局属性，来判断此时访问设备是什么。

@bp.route("/")
@Login_request
@Device_Identify # 识别设备装饰器
def index():
     if g.device == 'Android': # 如果访问端是安卓平台
          questions = QuestionModel.query.order_by(db.text("-create_time")).all()
          return render_template("m_index.html",questions=questions) # 对应得移动端模板
     else:
          questions = QuestionModel.query.order_by(db.text("-create_time")).all()
          return render_template("index.html",questions=questions)

如果有精力和事件。就可以把对应的电脑端模板，通过css不断调整，来适应手机端。只通过initial-scale来缩放，手机端也可以正常使用，只是界面字体和组件显示会比较小。
如下是使用initial-scale，并稍微使用css调整的效果。

这里是结束！