I've been trying for days to get smooth transitions in a RhoMobile project i'm working on, and i've managed to fix most of the glitches in page transitions: flickers, header jumping a couple pixels on transitions, etc...
But one problem still remains: It seems that when going from one page to another, just after the transitions is done (the destination page alredy appears), it will scroll down about 15-20 px, as if during the transition, it paints the destination page content not taking into account the px needed to display the header, and then later, adds that space.
I've seen this question asked before, but with no answer. Notice its not a duplicate of all the questions regarding flickering on transitions, since if alredy managed to get that working.
My viewport is as follows:
<meta name="viewport" content="user-scalable=no, height=device-height, width=device-width">
I've tried using javascript to set overflow: hidden while transitioning, but this has no effect on android.
Any suggestion appreciated,
Thanks!
It turns out that if you use extra height for your fixed headers and you want jquerymobile to respect that size at all times (also in transitions), you have to specify its height in css:
.ui-page-header-fixed{
padding-top: 3.5em !important;
}
Related
I'm creating a simple PWA, and I'm trying to make it looks like a native mobile application though I'm having several problems with the pinch-in.
I've added this code to my layout.html (I'm using Flask for the backend)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Although it really works as I want, there are some images that I want the user to be able to zoom in, and I know is not recommended to disable the scalable zoom for mobile but really, this is what I want, no zoom on the entire page apart from the imgs tag I have.
I'd like to have a pure css/js solution or at most something that does not need npm even a cdn is good for me
Set height and/or width of elements that ARE NOT images to vh or vw.
https://www.w3schools.com/cssref/css_units.asp
vh - viewport height - represents fraction of screen height. When you zoom in - (for example) font stays the same size
div {
font-size: 2vh;
}
I am experiencing a weird issue with my making my website responsive.
I basically have this output of my website on mobile devices:
Even though my body is set to overflow-x: hidden;, there is still white space and I can scroll on the x axis. I do not know why this is happening even though I have set it to hidden.
One thing, however, that might be making this happen is this right here:
When I scroll to the end of the website and then scroll on the x-axis to the farthest right, I see these things. Both the banner and the New icon should appear at the start of my website but somehow I see them at the bottom.
Basically, I am looking for this output:
I even added <meta name="viewport" content="width=device-width, initial-scale=1.0"> but I don't know why my website is not the same width as the device. Any suggestions?
Make sure your html element also has overflow-x: hidden:
html, body{
overflow-x: hidden;
}
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.
Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.
How can I prevent this from happening.
I tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
but that didn't do anything.
A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.
By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.
You can use javascript to disable the default actions of the browser (like page drag).
document.addEventListener("touchmove",function(event){event.preventDefault();});
BUT, that will stop the user from being able to scroll down also. to prevent only sideways you would have to add conditions that check the touch direction...
document.addEventListener("touchmove",function(event){
if(//check if the absolute value
of last touch.x -current touch.x
is greater than some threshhold){
event.preventDefault();
}
});
None of the questions on the subject has any real answer (I've
seen one that says "Just stop the zoom altogether!" and the other that
says "Set the width!" (which isn't the case))
I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.
It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.
When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.
Is it possible to have those buttons not grow by zoom somehow?
Here is a potential fix and good read if you are running into this problem.
Here is the website, css fixed position.
How my prototype works
What I’m doing is calculating the zoom level (poorly) with JavaScript
and then applying CSS transforms to scale the fixed element back down
to normal size. As you might expect there is no smooth transition
during zoom. There are a whole host of bugs and edge cases. I’ve not
even attempted cross browser support (hence no code).
This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.
Another link on this site seems to have a bunch of great info about your problem, more of a proposal.
Here is the website, position: device-fixed;
The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">