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" />
Related
I want do edit the Viewport line in my Header for my Dashboard in Node-Red. Need to show my Dashboard in fullscreen mode on an iPad.
in HTML i just have to add:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
in my header. But I have no Idea where to edit the header.
The Dashboard-UI Template node has a mode to add things to the header
This should let you insert the bits you want.
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 am trying to leverage the rich text messages with open graph meta tags. So I have included my meta tags in my website head and it passes all of the Facebook debug and iOS API validation tool.
Yet when I text the link to people either on Android or iOS it doesn't often work. It works typically with Facebook messenger
Does anyone know if this is a cell carrier issue or do I have something configured wrong?
<meta property="fb:app_id" content="********" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dameranchdesigns.com/" />
<meta property="og:title" content="Dame Ranch Designs" />
<meta property="og:description" content="Divinely inspired logo graphics and
website design. A whole new way of being ... on the internet." />
<meta property="og:image"
content="https://dameranchdesigns.com/images/logos/DRDSunLncropped.png" />
Yetter,
A couple of quick things to help you out here:
Apple Support Open Graph for rich SMS messages only since iOS 10+, so make sure that the device you are testing the sent text message to is at least iOS 10 (or higher)
Apple only supports og:title and og:image. It ignores the rest (so in your example above, og:description is completely disregarded. Furthermore, if your og:image is a gif image, Apple doesn't support that.
Your url in the text message needs to be on it's own "word" meaning there needs to be at least a space between it and any other word in the text. Furthermore, and perhaps most importantly, it needs to specify a scheme, so either: http:// or https://.
You can only have one hyperlink to your site with the og:tags. More than one shuts this functionality down.
Lastly, I don't believe Android supports such rich messaging functionality in it's SMSs (at least not with Open Graph) -- at least as far as I know as of this writing (Nov-2017). It would be great if they adopted OG as a standard.
So for example These wouldn't work:
you were invited. You can join on: grapevite.com //no scheme present
you were invited on http://grapevite.com. Care to join? //Link is between text.
Whereas these would work:
you were invited on Grapevite. http://grapevite.com
http://grapevite.com. The world's premier platform for creating, sharing and joining experiences
Reference Reading:
Some sites like these would provide you with some insight as to the above: https://uplandsoftware.com/mobile-messaging/resources/blog/what-ios-10-means-for-mobile-messaging/
https://www.tatango.com/blog/ios-10-what-sms-marketers-need-to-know-and-do/
A bit of an update for anyone dealing with this mid-2019. I was dealing with this today. I was trying to specify a certain thumbnail to be shown in the rich message preview across Facebook messenger, iOS messages and android messages.
Using actual code from the website I was working on. Be sure to replace content with your own.
These 4 tags made it work for me on Facebook messenger and iOS messages:
<meta property="og:title" content="Software to manage leasing and rental applications" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://geteagle.com.au/products/leasing-tools/" />
<meta property="og:image" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
For some reason, android messages refused to show the thumbnail I specified. I did a lot of research and tried everything I could find in this other question: Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work
My tags bloated to 9 (8 meta, 1 link), but it was actually the link tag that made it work in android messages:
<link itemprop="thumbnailUrl" href="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg">
I'm not sure if the other tags are needed in addition to the link tag to make it work on android messages, but here is the full block if you want to try:
<meta property="og:title" content="Software to manage leasing and rental applications" />
<meta property=”og:description” content="Eagle offers a suite of of leasing tools and application management features to power-up your rental team!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://geteagle.com.au/products/leasing-tools/" />
<meta property="og:image" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
<meta property="og:image:secure_url" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="500" />
<link itemprop="thumbnailUrl" href="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg">
Many thanks to this particular answer from the question mentioned above that resolved my frustrating situation.
Hope this helps. Good luck!
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..