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.
Related
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.
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
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
I am using the Jquery colorbox pop ups they work superbly in all browsers except in IE9: they lost his position, height and width when they open. Anyone know what the problem is?
In my case, the problem went away with NOT using mootools.js on the same page where I used colorbox. So I guess mootools.js and colorbox together don't work in IE9.
In my case (magento) it was a problem with other scripts (using prototype). Removing prototype library made colorbox working fine also in IE9. Trying jQuery.noConflict(); didn't help to made scripts work together. I've added compatibility meta tag, to force compatibility mode in IE9 with IE8.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Can someone help me please?
Am working on this page:
http://www.lorealprofessionnel.co.uk/about-us/loreal-professionnel-portfolio
On INTERNET EXPLORER, why I can't see arrows to navigate through the carousel. It works on all others browsers
I have put :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE[all version here]" />
but nothing !
Actually those elements appear and disappear on Chrome too. When they're invisibile it seems something has given them explicit positions which are fighting with the logic in the original CSS. I can't find where precisely quickly because the page loads over 20 JavaScript files. I have rarely seen so much code to do so little. Screams of corporate CMS. I'm not surprised debugging this is a nightmare.