In the bootstrap application, what layout best suit both mobile and browser user interface? fixed-width layout or fluid-width layout? Do I need explicitly define the css media query styles for both design?
You may use Bootstrap's responsive deisgn by which your website will automatically adjust itself in order to give users a comfortable experience for whatever size device they’re using..
For it's application you need to include meta viewport tag under your <head>..</head> tags in addition to including Bootstrap’s responsive stylesheet
<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
<link rel="stylesheet" href="responsive.css" />
..
</head>
You may check further details here and also this article
So, If you have correctly setup your page with containers, rows, and spans, Bootstrap will automatically adjust the layout for each device you are viewing the website on..
Related
I was developing a raw application in spring boot with thymeleaf and I can not make it work on mobiles, the page uses bootstrap and collapses perfectly when I lower the browser window, but on mobile devices, it scales to the full resolution possible, as if like desktop resolution where...
this is mi image of my app in mobile:
in mobile mode
this is my image when i try when collapse the window od navigator in responsive mode:
responsive mode
the code of my application is here: https://github.com/Daviddg91/APIUsuariosSpringBoot
thanks and good code, Regards
-----------------Edit:---------------
I have been testing the spring-mobile-device library but it only allows you to change the page according to the type of device, it does not allow you to autoconfigure the responsive of the page and integrate with the thymeleaf template
SOLVED: this meta tags in layout file was working responsive:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a problem with the display of my site on mobile, I explain to you:
I state that I checked all the tags and the structure of my code there is nothing abnormal.
when I look at the site from the browser of my pc in mobile version everything seems to work, including the javascript bootstrap part
when I use my bootstrap phone it doesn't work and I see everything very small and not responsive
I have already tried to manually load the bootstrap CDN in the basic layout including the cdn of its javascript but nothing to do.
in desk version therefore on normal monitors everything works perfectly.
what can I do? thank you so much
to achieve that you should add this meta inside the <head></head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for more information viewport meta tag
I'm still learning Laravel 5.3 and started studying it a few days ago. One tutorial project I'm following made use of Fontawesome and Bootstrap where bootstrap link and fontawesome link was included within the <head></head> tag.
So I thought that if I disconnect the internet connection, it will fail to display the icons from fontawesome since no library file was downloaded and imported to project. But I was surprised that it still was able to display the fontawesome icons.
That's when I of thought of asking this simple question since I'm a beginner with Laravel and web programming. (Java programmer)
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#yield('title')</title>
<!-- bootstrap link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- fontawesome link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- app.css link -->
<link rel="stylesheet" href="{{ URL::to('css/app.css') }}">
#yield('styles')
</head>
I read something from Laravel 5.3 documentation about the bootstrap directory that stores cached information. Is the caching the reason the fontawesome icons still displays even when it is not connected to the internet?
The Bootstrap Directory
The bootstrap directory contains files that bootstrap the framework
and configure autoloading. This directory also houses a cache
directory which contains framework generated files for performance
optimization such as the route and services cache files.
I'd appreciate any explanation to this so I can better understand how it works.
Your browser has cache too. Do hard refresh / reload - in Chrome you can do this by opening inspector and then right click on refresh button and click what suits you the most.
Describing what is actually going on would be too long for an answer.
Good description what is going on is here.
Google search terms: browser cache, web browser cache
If you use build system (gulp) you will most likely end up with large *.css file which contains bootstrap, font-awesome definitions etc.
More on that is right in documentation.
Is it posible to avoid screen rotation on web mobile with the viewport meta property? Our website should only be viewed in portrait mode always.
<meta name="viewport" content="width=device-width" />
Thanks.
No, this is totally dependent on your user agent and the platform on which it is runnung.
But you can make sure that they wouldn't mess in your page, if it is written in the head section properly.
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
I need to implement mobile device detection on a static HTML website. JavaScript isn't an option since many devices have it disabled or don't support it. The site is on a Windows server and as I normally work with a LAMP stack I'm not sure what my options are. Any help would be much appreciated, thanks!
I think it's depends on what do you expect to do after the detection. If you you only want to change the style of your HTML page, you can just add different CSS files in your HTML header section.
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />
The first line will applied screen.css to your web page when user browse with standard monitor. The second line will be applied when browsing with a mobile device.
Other than simple style changes, I don't think you can do too much on static HTML.