Bootstrap page Zooming issue when it loads

When my Bootstrap page loads initially, it is zooming the page by default only in Portrait mode of a small device(Mobile) and making my table data out of the screen.

Here is the code of Meta

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Representative Ordering</title>
 <meta name="_token" content="{!! csrf_token() !!}"></meta>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>
</head>

Tried all possible Initial-scale value (1.0 and 1) and max scale and min scale everything. But not working.

And Linked app.cs and added -webkit-text-size-adjust:100%.