最近、ご要望をいただきましたが、元々のログインページがPC用だったため、モバイル端末から直接アクセスするとログインボックスが縦中央にならないという問題がありました。その後、PC側でもモバイル端末でも問題なくアクセスできるよう、PC側のlogin.htmlのスタイルを縦中央に変更しようと考えました。しかし、その後の顧客はこの変更に不満を抱き、PC バージョンの元のスタイルを保持してモバイル バージョンに適応させるよう要求しました。スタイルの変更は、ユーザーがアクセスするクライアント サーバーに基づいてのみ決定できます。
1. リクエスト ヘッダーは HttpRequest リクエストを使用してパラメータを受け取ります。
2. バックエンドコードの実装:
String userAgent = request.getHeader("user-agent");
String device = null;
//移动端访问
if (userAgent.indexOf("Android")!=-1 || userAgent.indexOf("iPhone") != -1 || userAgent.indexOf("iPad") != -1){
device = "mobileTerminal";
request.setAttribute("device", device);
}else {
//PC端访问
device = "pcTerminal";
request.setAttribute("device", device);
}
3. フロントエンドはパラメータを受け取ります
<script th:inline="javascript">
$(document).ready(function (e) {
var device = [[${
device}]]
if (device === 'mobileTerminal'){
$('.login').attr('style','left: 50%;right: 160px;transform: translate(-50%, -50%);margin-top: 0');
}
});
</script>