Menu
I have worked with Bootstrap many times, and have only seen this issue when my meta viewport tag is missing. However, that is loaded, and I am still experiencing issues with Bootstrap on mobile devices. Might anyone know what else could be causing this?
Issues:
Head:
<!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, maximum-scale=1">
<title>Training Portal</title>
<!-- bootstrap/jquery -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- custom stylesheet -->
<link href="<?= base_url("stylesheets/cust.css"); ?>" rel="stylesheet" type="text/css" media="screen">
</head>
Scripts at end of <body>:
<!-- scripts -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="<?= base_url("assets/script.js"); ?>"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
Viewport data also added to CSS:
@viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Example of issue on mobile:
What this looks like on desktop:
849
Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers.
These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Bootstrap has become mobile first since Bootstrap 3. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.
It appears to be a PHP error, and judging by the lack of CSS, I'm going to take a stab and say that maybe the PHP short tags (<?= and <?) are not enabled?
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
