Enyo for Website. Mobile browsers fail to render it properly.

edited October 2012 in Application Development
Hello everyone,

This is my first post in the community. I am having an issue while I am trying to develop a website entirely in enyo. While I am rendering the website on desktop browsers , everything is running ok . Trying to access it from mobile phones fails in most cases. As example you can go at 156.17.232.232/appopsiSite/debug.html and check it out from your mobile device and from your browser. Since is the development environment I would like to please you to just try to render it and give me any suggestions. How can I fix the whole issue? How can I render it properly? I used so far @screen css rule with some precondition about width. That changes the font-size and makes the whole layout shrink a bit.Still some parts of my website are missing and is unacceptable layout anyway. I am out of ideas.

Comments

  • Also to mention that on my Pre3 the whole website fails to lock the zoom . Also is drag-able and that prevents the 2 scrollers to work .
  • Can you post some code or put up a jsfiddle? It's impossible to help without more info.

  • Also used mobilw opera to see your app. Looks decent but it wouldn't zoom to a decent size to read text.
  • edited October 2012
    well yes here is the layout of the header which i CAN'T even brake it into three groups and justify them, left center and right. Back in enyo 1 days there was the flex which made things really easy. Now is giving me headache because I cant justify them. When I am using "float:left , right " the login-area control which includes user/pass input and the button kicks right bellow the whole div during rendering on some browsers. e.g. firefox + pre3 browser
    {kind:"enyo.Control",classes:"body header",layoutKind:"enyo.FittableColumnsLayout",components:[
    	{classes:"logo-area",components:[{kind:"enyo.Image",classes:"logo",src:"assets/appopsiLogo.svg"}]},
    	
    	{kind: "enyo.Scroller",classes:"app-area",touch:true,thumb:false,vertical:"hidden",horizontal:"scroll",components:[
    	{kind:"enyo.Control",layoutKind:"enyo.FittableColumnsLayout",style: "text-align:center;vertical-align:middle;",components:[
    	
    	{kind:"enyo.Control",layoutKind:"enyo.FittableRowsLayout",classes:"app-box",components:[
    	{components:[{kind:"enyo.Image",classes:"app-avatars",src:"assets/question.png",ontap:"showDillema"}]},
    	{components:[{kind:"enyo.Image",classes:"app-titles",src:"assets/titlesoon.png"}]}]},
    	{kind:"enyo.Control",layoutKind:"enyo.FittableRowsLayout",classes:"app-box",components:[
    	{components:[{kind:"enyo.Image",classes:"app-avatars",src:"assets/question.png",ontap:"showDillema"}]},
    	{components:[{kind:"enyo.Image",classes:"app-titles",src:"assets/titlesoon.png"}]}]},
    	]},
    	]},
    	{kind:"enyo.Control",name:"headerLogin",layoutKind:"enyo.FittableColumnsLayout",classes:"login-area",components:[
    	{kind:"enyo.Control",layoutKind:"enyo.FittableRowsLayout",style:"vertical-align:inherit;",components:[
    	{components:[
        {kind: "enyo.Input",classes:"login-input",name:"userName",placeholder:"Username"}
    	]},
    	{components:[
        {kind: "enyo.Input",classes:"login-input",type:"password",name:"userPass",placeholder:"Password"}
    	]}
    	]},
    	{kind:"enyo.Image",classes:"login-btn",src:"assets/LoginArrowSmallArt.png"}
    	]}
    	]}
    Another thing is that it DOESNT render as it should. The body part has two controls as you see. They are inside a 2nd file-component with equal width both and positioned at center (text-align:center) when i am loging in from a mobile browser, the browser doesnt automatically scale the component to fit the screen. Instead , i m watching only the left div and partially the second (register div).

    So second question is . How do you automatically scale enyo interfaces? Why mine is not scaling ? Is it done automatically or I need to adjust my handled view ? All my dimensions in CSS are in em , so they should adjust or at least be included somehow to the whole browser without chocking some parts.
  • In order for CSS3 media queries to be effective on mobile you'll need to look into the HTML viewport meta tag, which will tell a mobile browser to render it in a smaller "viewport" window. The one that works best is:

  • my viewport looks like this. Is only testing so some thing may be wrong but nothing managed to make it write.
    but doesnt really have any effect. At least on webos browser

  • Here is how my viewport looks like. That is an instance. Constantly changing it to see if there will result in something different. Still no effect on webOS no matter what i put.


  • Looking at your viewport meta tag it is still a little dissimilar to the one I posted, could you try the exact one I posted and give it a try?
  • You may posted something but i dont see any plain html code. I cant see mine as well. Can you please put it in a "code" box?
  • Sorry, didn't realize I didn't put it inside code tags.

    Anyhow, here it is:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
  • This was my initial setting . Is not working with this. I think this is only for application development and not for web site development. You helped me a lot when you told me about width . If i set it manually to say 800px; renders much nicer.
  • That's the exact tag we're using on the Enyo website and it allows media queries to work. Perhaps you could try the following media query instead?
    @media (max-width: 320px) {
    	body {
    		font-size: 4pt;
    	}
    }
  • edited October 2012
    I have something similar.
    @media screen {
    BODY {font-size:4pt;}
    }
    @media screen and (min-width:500px) {
    BODY {font-size:10pt;}
    }
    I will try the way you put it and see. At least now I know how to do it. Probably i will define viewport from screen size AND orientation to get the best results. Thank you a lot . That helped and I spent all day trying to find what is not working correctly. Do you have any suggestions about the login group I described before? they deny to go and stay on the right of the header. Only float:right works but creates problems in firefox. I wouldnt like to make their position fixed although that would work but it causes overlapping of elements in some cases.
  • I would say perhaps set the #site_control as position:relative; Then set the logo and login boxes as position: absolute; with the logo's left and login box container's right set to 15px each. Then, when the viewport drops below a certain number of pixels you can break them down into display: block; and position: relative; for each:
    #site_control {
    	position: relative;
    }
    #site_control2 {
    	position: absolute;
    	left: 15px;
    }
    #site_headerLogin {
    	position: absolute;
    	right: 15px;
    }
    @media (max-width: 600px/* this is up to you */) {
    	#site_control > * {
    		position: relative;
    		display: block;
    	}
    }
Sign In or Register to comment.