Page 1 of 1

Meta Name Viewport and multiple screen sizes

PostPosted: Sat Jan 02, 2016 12:50 pm
by luishp
I have been playing with all the options I can think to adapt an App to every possible screen size.
For me one of the best options is to manually edit the html file header and replace this line:

Code: Select all
<meta name="viewport" content="user-scalable=no, maximum-scale=1">


With something like this one depending on final App size in pixels:
Code: Select all
<meta id="myviewport" name="viewport" content="width=1280, user-scalable=no, maximum-scale=1">


I even add this script to be sure the App will be seen perfectly on iPad:
Code: Select all
<script>
if (screen.width == 768) {
   var mvp = document.getElementById('myviewport');
   mvp.setAttribute('content','width=1024, user-scalable=no, maximum-scale=1');
}
</script>


It would be very useful to have an option to define custom header meta tags.

Thank you!

Re: Meta Name Viewport and multiple screen sizes

PostPosted: Sat Jan 02, 2016 10:53 pm
by Neosoft Support
That's a good idea. So if the user defines a meta tag that duplicates of one NAB automatically adds, the user's should take precedence?

Re: Meta Name Viewport and multiple screen sizes

PostPosted: Sun Jan 03, 2016 11:11 am
by luishp
I think the ideal scenerio would be a project properties new tab where we can customize the default inserted tags.
Perhaps one tab for the head section and another tab to insert content (scripts...) before </body> tag, where Google Analytics and similar scripts should go.
If there is nothing in those tabs then NAB adds the default ones.

Anyway I am currently trying to do a plugin approach.

Thank you!

Re: Meta Name Viewport and multiple screen sizes

PostPosted: Wed Jan 06, 2016 12:20 am
by luishp
My plugin approach is not working as I expected :cry:
Meta tags are interpreted by the browser and crawlers when the page is loaded.

There are some specific metatags that would be interesting to have the opportunity to add to our web apps.
For example...

For FaceBook:
Code: Select all
<meta property="og:url" content="http://sinlios.com/">
<meta property="og:site_name" content="SinLios Soluciones Digitales">
<meta property="og:image" content="http://sinlios.com/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">


For Twitter:
Code: Select all
<meta property="twitter:creator" content="SinLios">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="SinLios Soluciones Digitales">
<meta property="twitter:description" content="Best web development services">
<meta property="twitter:image:src" content="http://sinlios.com/logo.png">
<meta property="twitter:image:width" content="1200">
<meta property="twitter:image:height" content="1200">

Re: Meta Name Viewport and multiple screen sizes

PostPosted: Wed Jan 06, 2016 8:37 pm
by Neosoft Support
I'll add this to the "to do" list.