先看电脑端访问是正常的
而手机端导航条不见了
<meta name="viewport" content="width=device-width, initial-scale=0.3">
这里宽度自适应，定义初始缩放值0.3，就是原来页面的0.3倍。 想详细了解可以看这篇博客：详解meta-viewport标签
不过，这样直接改电脑端页面显示效果就太小了，所以可以从新定义手机端的模板文件。
*首先加入手机端模板文件
之前的电脑端工程文件结构
加入手机端模板文件，m_ 代表移动端模板文件，注意必须在templates文件夹下。
基本思路是 使用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调整的效果。
这里是结束！