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">
Related
I'm developing an app that sends HTML mail. I just condensed all of my CSS code into a .css file that is now linked in the mail header:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://example.com/mycss.css" rel="stylesheet">
</head>
<body class="email-body">
...etc...
I discovered a mistake in the .css file, re-uploaded it to example.com, and now for the life of me I can't get Mail to use it properly. Mail must still have the old .css file cached.
I know with Safari I can clear the cache with the Safari -> Clear History menu item. How do I do this in Mail?
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" />
Could someone help me with some solution that would prevent user from moving WP8 web browser content sideways but still allow to scroll vertically?
use the below meta tag in the web page to avoid sidewise scrolling.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
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..
I'm trying to render a webpage in Explorer as IE8, since IE9 is doing a great mess with CSS and not showing the #font-face.
I read the Microsoft Documentation here: http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx and other related topics like IE9 does not at all care about 'X-UA-Compatible' meta tag and Force IE9 to emulate IE8. Possible? and none resolved my issue, either I am very dumb (witch can be) or I can't find the problem.
The webpage is: karactermania.com/web2012/betty and I'm using the CMS Textpattern to build it.
I tried with:
<!-- Enable IE8 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- Enable IE8 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE8" /> (as I found some examples written with and without the "=")
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE8" >
<![endif]--> (desperate attempt)
Complete HTML declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<!-- Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE8" />
If anyone can point where the error is and how can I fix it, will earn my eternal gratitude :)
Thanks
I had the same problem as you. My X-UA-Compatible header was ignored. I found the solution in this post
The x-ua-compatible header has to be in the head section, before all other elements except for the title element and other meta elements