Bob's Blog

现在访问网页除了pc端，手机端也是经常使用的类型。

那么会有个需求，在pc端和mobile端展示不同的内容，毕竟pc浏览器里的布局显示不一定适合在手机浏览器上。

一般会有两种方式：

 1. 响应式布局。比如bootstrap也有相关定义。通过查询媒介，针对不同的屏幕宽度来设置对应的css样式，可以实现在不同设备上对同一控件展示成不同的外观效果。

          在html的head中首先定义：         

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

          在css定义中可以指明不同的宽度使用什么样式属性(从网上复制了下面的样例，因为自己没有使用这种方式)：

/width < 768px*/
@media screen and (max-width: 768px){
    .container{
        width:100%;
        background-color: green;
    }
}
/width >= 768 and width < 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
    .container{
        width:750px;
        background-color: blue;
    }
}

2. 判断设备类型来加载不同的内容。目前自己采用的这种方式，因为需要的不是css样式不同，而是使用的元素类别都不一样了，响应式布局无法满足需要。

判断设备可以检查user-agent里的关键词。

比如电脑版的safari是：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

iphone的safari则是：

Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1

在你的django app下面添加一个文件，比如device_agent.py, 添加如下内容：

def device(request):
    '''from mobile browser or pc browser'''
    user_agent = request.META['HTTP_USER_AGENT'].lower()
    mobile_re = ['iphone','android','mobile']

    is_mobile = False
    for keyword in mobile_re:
        if user_agent.find(keyword) >= 0:
            is_mobile = True
            break

    if is_mobile:
        return {'device_type': 'mobile'}
    else:
        return {'device_type': 'pc'}

在settings.py里更新如下内容：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'bobjiang.device_agent.device' # add device_agent
            ],
        },
    },
]

在html模板中就可以使用device_type来判断设备类型并加载不同内容啦。

{% if device_type != 'mobile' %}
    <ul class="navbar-nav">
{% else %}
    <ul class="nav nav-pills justify-content-center">
{% endif %}