I'm having a real hard time trying to trouble shoot this issue. I've seen others with the same problems but all seemed to find a fix, none of which work for my clients site. I've tried a number of different combinations but nothing works.
The site is completely responsive on desktop, android, and IOS6 / below, but after the release of IOS7 it no longer displays correctly on any of the IOS7 browsers and defaults to the desktop layout (although fits all on the screen, still not ideal). It's like it's ignoring the viewport settings for retina.
The website in question is www.grupoevents.com
I really appreciate any help as I've already spent hours trying to fix it!
This is probably the 6th variation of viewport I have tried now, still not working :(
What combinations have you used? I have used this in the past and it works for me.
<!-- standard viewport tag to set the viewport to the device's width, Android 2.3 devices need this so 100% width works properly and doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<!-- width=device-width causes the iPhone 5 to letterbox the app, so we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
There is in fact an extra meta tag. Here it is and here's its id. <meta name="viewport" id="sv-meta" content="">
It doesn't show up on desktops, so it's probably being generated by this script <script type="text/javascript" src="http://grupoevents.com/wp-content/plugins/wp-simpleviewer/svcore/js/simpleviewer.js?ver=2.3.2.1"></script>. You should look into the settings for that plugin, but if you can't find any, then you might be able to use this javascript at the end of your header:
<script type="text/javascript">
var svMeta = document.getElementById('sv-meta');
if(svMeta){ svMeta.parentElement.removeChild(svMeta) }
</script>
Related
We have some performance issues with IE10/11. The following plunker explains some of our degrading performance while repeating table rows with custom elements.
Plunker Example
code
In this plunker example, we get a total of 68 ms in chrome to render the entire table.
In IE11 we get 280ms and see a 100% increase in render speed per row. While chrome do up to 3 rows per ms, IE does one every 2ms.
This plunkr is a basic model of our application. In our application we repeat the following template which is alot heavier. It involves style calculation and show/hide bindings depending on the users settings and permission level.
It's in swedish so don't mind the text.
The second row (expanded information) is if.bound so it's not drawn initially.
In our application, if we render a view with 100 rows of our template, chrome renders the entire table in 587 ms. IE11 does it in 3779ms. Edge does it in 1283ms, and Firefox 909ms.
Each row takes about 30ms in IE11,
Is there any reason IE11 should perform so much worse with the aurelia-template? What can we do to improve IE render speed? I have tried setting bindings to oneTime but that didn't do much. Is there something you should avoid doing in custom elements that doesn't work well with repeating and IE.
We want the custom elements because of reusability and code management since the template is pretty big.
Make sure you're using an up to date version of Aurelia, and make sure that you're using Bluebird if you need to support IE or older versions of Edge, as their Promise implementations are atrociously bad.
If you replace the index.html in your Plunkr with this:
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="//cdn.jsdelivr.net/bluebird/3.4.5/bluebird.min.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Then the last row's draw time on my desktop is 278 ms in IE 11 on Window 10. See here: plunkr
I have posted an issue with the aurelia team
https://github.com/aurelia/polyfills/issues/39 and a github project https://github.com/4nderss/aurelia-performance-test reproducing my issues.
Aurelia team closed the issue so there might not be any fix for IE11 for now.
Edit: The aurelia team found an issue and it is now fixed
I have used the carousel example on Bootstrap3 to make a simple gallery website. On a desktop, it appears as I want, and shrinking the browser causes the navbar to collapse as expected. But it won't collapse on the phone. Instead the whole menu appears as a small version of the desktop view. From reading the docs, I thought it would start collapsed on the mobile view by default.
Since I followed the example code closely and all the bootstrap nav examples appear closed, I'm not sure what piece I'm missing. The site is up: http://artbymanisha.com
Add the following meta tag to in the <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am using media queries to successfully resize/style various elements on a page when viewed on smart phone browsers.
The difficulty I run into is with Bing Maps. The map never resizes although the div it is within does. Inspecting the elements shows that the map element.style is set to 100% width and height.
I have included
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
to prevent browser zooming.
Any suggestions appreciated
I've done this before without any issues. Have you specified a CSS position on the map? Take a look at this code sample I put together: http://code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5#content
I'm in the process of creating my own framework and have been looking at other boilerplates to see how it is done.
I'm currently looking at this bare bones stylesheet and was wondering why it seems to act responsive when you resize the browser, but when I open it on my iPhone or iPad it displays the full screen version of the site.
Sorry if this is noob question, I'm still trying to wrap my head around media queries (no pun intended).
Thanks in advance.
UPDATE: Silly me, I forgot to add the meta tag to tell devices like the iPad to set the device width to the size of its viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
UPDATE: Silly me, I forgot to add the meta tag to tell devices like the iPad to set the device width to the size of its viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I've setup my Rails 3 app with only
<%= yield %>
in the application.html.erb and pages.html.erb layout files (Pages is my controller), and I have a view with only the following:
<!DOCTYPE html>
<html>
<title>My Title</title>
<body>
<iframe src="http://myiframesource.com" seamless="seamless" width="100%" height="1949px"></iframe>
</body>
</html>
But the iframe still has a border around it and does not completely fill the page when I look at it in my browser (I tried several). According to W3Schools http://www.w3schools.com/html5/att_iframe_seamless.asp
the seamless attribute should have no borders nor scrollbars and " should look like it is part of the parent document."
I'd also like to not have to tell the iframe what width/height to be, and just have it take up as much space as it needs.
Why does the seamless attribute seem to not be working right?
That's probably because your browser doesn't support seamless iframes. As far as I know it doesn't work in either Firefox 4 or Google Chromium 11, you'll have to wait until someone actually implements it. As for the iframe taking as much space as it needs I don't think that there is currently a way to do this without JavaScript. For a JavaScript solution just search the web, there are several tutorials about this.