mobile emulation with storybook react - javascript

I'm trying to test my touchscreen swipe event listeners on a react component built with storybook, and I can't seem to get proper mobile emulation to work. The style changes I have attached to window width breakpoints work upon physically resizing the window, but when viewing the iframe mode in either the chrome device emulator, or on my phone, it just looks like a tiny version of the desktop site. It doesnt seem to work with my swipe animations either. I've done tons of googling on this, and all I've managed to find is a storybook add-on to manipulate the viewport (https://www.npmjs.com/package/#storybook/addon-viewport). I'm pretty new to developing for mobile-only options like touchscreen swipe, so any help would be greatly appreciated!

i discovered that the problem was with meta tags. to get mobile emulation to work, you have to in the .storybook folder, add a file named preview-head.html and in the file put <meta name="viewport" content="width=device-width, initial-scale=1"> then to get the emulation to work correctly, view the component as an iframe.

Related

Android browser rendering half width of html text

I have already disabled the CSS, deleted half of the HTML code, it looks like it is a bug with the Android browser. I'm using Android 4.2.2, built-in browser.
How it should render:
Text 1234567891011
How it is actually rendering:
Text 1234
567891011
I have double checked the page code and the CSS, disabled Javascript and CSS, and still get the same results. I'm not sure if it is a browser issue or a code issue.
Page to check: http://lucrebem.com.br/blog/emp/66-o-que-vender
Screenshots, as requested:
So far I have found this:
Those images are from a tutorial using Android 4.1.2, which means those older versions of Android have that issue with auto-fitting the pages. Isn't there a way to configure the code itself to fit the page, instead of having to change Android settings?
Solved.
Had to insert this in the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What it does is controlling the viewport layout in mobile, this way the page can fit to screen without having to change Android settings.
As stated here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Force hide address bar in Chrome on Android

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers

Adding apple-mobile-web-app-capable stops SVG touches being recognised

I'm trying to add touch functionality to an SVG.
I recognise the touch event using a jQuery like selector.
(I'm actually using angular JQLite - angular.element()):
.on("mousedown touch", function(event) {
On my desktop and in mobile Safari, there's no issue. The touches are recognised correctly.
It also responds correctly when saved as a bookmark, but when I include:
<meta name="apple-mobile-web-app-capable" content="yes" />
in my header, and save to the home screen.. the touch piece doesn't respond.
I'm wondering whether anybody knows the root cause of this or has a a workaround?
I'm using Angular 1.2.27 and iOS 8
For info, I worked around the issue by embedding an ng-click within the SVG itself.
This would tend to point to angulars JQLite implementation of click/moousedown/touchstart being the cause or possibly not supporting the same touch events as ng-click.
Add the following lines to your css-file.
svg {
pointer-events: none;
}
Now it should work.

JQuery Mobile Website not working on IE9 or Above

I am new to Javascript. We made a mobile website using JQuery, Backbone, RequireJS and UnderscoreJS. To test it we uploaded it over a localhost server. It works fine with Google Chrome, Safari and others but not with Windows Phone.
What can be the probable cause for it.?
Windows8 on Nokia 720: Websites appears after login, nothing comes up. Just the background loads, no elements and texts.
Windows 7.8 Nokia 510: Website has no CSS. After login, background color appears but no element and text.
Nothing comes on screen as such.
Please let me know if you didn't get my question.
Please check whether you have included the below tag in the html.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Hope this helps.

How to stop page scrolling while....still allowing scrolling?

I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.

Categories