Odd Mobile Variant Display

Okay, here is one for the gurus here. I am having a strange display issue on "some" cell phones with a mobile variant while on other phones it doesn't happen? I am thinking this may just be something about differences between phone browsers but...?

I am working on a new site that has a 480 mobile variant. The site has Google Maps, Google Calendar, and a Blog Spot blog( Google ). All 3 add-ons are added to the site using basic <iframe> code. It is the same basic code for all 3 with the appropriate url for each being the main difference( calendar has a few extra variables to determine what features/options it displays ).

The maps works fine but the calendar and blog both cause the exact same odd display issue on my android cell( but not my friend's phone ). When the calendar and blog pages load on my cell it is the desired 480 variant version BUT it isn't shrunk down fully to the size of the screen in the vertical position. The page winds up being about 1/3 again as big/wide as the display area. In other words I see 2/3 +/- of the page( width )once it finishes loading and I then have to scroll the screen to the right to see the other 1/3 of the page( width ). If I flip the phone horizontally I see the full page with a little of the pasteboard area around it.

If I remove the calendar and blog from those pages and then check them on my cell the pages display/fit properly. As said ^^^ the maps( Google ), inserted the exact same way, do not cause this issue. It is only the Google Calendar and the Blog Spot blog( Google )that do this? I have altered the actual size of the calendar and blog on their respective main sites to make them smaller, I have tried various changes to the size code( i.e. using 100% and trying an actual number like 325pix ), and I have also tried making the placeholder smaller too. Nothing changes the odd display behavior. The actual calendar and blog sizes on the pages change but it doesn't stop the oversized page display? I can always link directly off site to the calendar and blog but the client wants them to stay on site and have those items display on site.

Has anyone ever run across this before and if so is there anything I can do about it? It isn't the end of the world( the visitor can just flip their phone horizontally if they experience the issue I did )but I would rather have all pages display the same vs 2 of them displaying different. I did a search of TG before asking and found a few threads where odd display cases were discussed and ultimately attributed to the differences in phone browsers used with no fix possible. Does it sound like we may have such a case here? I have a 4 year old LG android and my friend is using a 2+ year old Samsung android. I don't know what browser my phone uses but we looked at the test page on his in Google Chrome. I didn't think to try downloading a different browser to my cell before taking the test page down( should have I guess - definitely going to for future testing ).

I haven't added a sample of the .web document but can do a sample one up if needed. I don't have a link to go look at either right now as I took the test page down once I saw it worked properly on my friend's cell. Figured I would just ask and see if this rings any bells before attaching things.

As always thanks for your time and assistance.

You'll never get a definite answer without the code, the browser type and version.
There could be any number of reasons around CSS, browser rendering, JavaScript values overriding widths or just straight browser incompatibilities.

Adding three (basic) <iframe> code into Placeholders is what I would check first as one might be shouting louder than the others.

Acorn

Just to be clear they are not all on the same page. Each has it's area on the site. Not sure if you think they are on the same page or are suggesting putting them on the same page to see what happens? I am not sure I would understand what is being "shouted at me" though if one was rowdier than the others?

I will try and get a sample page done and posted here at some point soon. I figured I would probably have to but I hate to upload stuff/attachments if I don't have to. I will also try and see what browser I have.

Thanks as always.

Quote:

---

Originally Posted by gsthunder

Just to be clear they are not all on the same page. Each has it's area on the site. Not sure if you think they are on the same page or are suggesting putting them on the same page to see what happens? I am not sure I would understand what is being "shouted at me" though if one was rowdier than the others?

I will try and get a sample page done and posted here at some point soon. I figured I would probably have to but I hate to upload stuff/attachments if I don't have to. I will also try and see what browser I have.

Thanks as always.

---

Sorry I misunderstood. Browsers render sequentially and if the same CSS or other code with a difference is fired up, the last one wins.
Acorn

480 points is too wide for many phones in portrait mode.

Quote:

---

Originally Posted by pauland

480 points is too wide for many phones in portrait mode.

---

Paul;

Thanks for the reply.

I am new to variants but this is the 1st time I have had any problem getting a site to display properly( mine or others )on my cell? It is definitely something to do with showing the calendar and/or blog in the <iframe> even though I have made sure the area is well within the boundary limits of the page. Not sure what the deal is but it is definitely related to those 2 specific things. Take them off the page and the page will load properly and as I said Google Maps in an <iframe> using the same basic <iframe> code does not do it?.

I use 480 as a good compromise for all smaller devices. I am not keen on doing 3, 4, 5+ versions. 2 is enough for me. :D

Thanks for the response.

Update Time...

I took some time this morning to redo the test site. One page had the blog and the other the calendar. I checked on my cell and the issue still persists. So, I then downloaded Google Chrome and used that to view the test pages as they worked fine in GC on my friend's Android. The results... the problem is now gone on my phone( in GC anyway ). The blog page now displays properly.

So, it appears this is an issue with the browser on my cell. I am not sure which it is though? I can't seem to find anywhere that it tells what it is or that even lets me check for updates and such? It is a blue world with white clouds and is the default browser that came on the phone( LG Lucid from Verizon ). It is simply called HTML Web Brower in the literature. FWIW see photo in link below to see what I have...

http://www.verizonwireless.com/suppo...ge-base-55917/

Thanks to all for the assist. I am not going to worry too much as this clearly is a browser issue and not something I did.

Okay last update...

I found what browser it is by using an online site that will tell you which you are using and it says I am using Android 4. Also, I dug around in the settings a bit and noticed that the zoom was set to medium by default. Out of curiosity I changed it to far and once I did that the pages load properly with the calendar and blog. They no longer load slightly too big, they load like the rest of the pages do. HOWEVER, if you flip the phone horizontally, with zoom set to far by default, it will load the full version of the site instead of the mobile variant. I have set it back to medium and will just flip the phone horizontally or use my fingers to shrink the screen down going forward.

Also, just to see what would happen I downloaded FireFox and it has the same display issue with the blog and calendar pages. Does the exact same thing as my default browser( i.e. opens the site about 1/3 too big to fit all onscreen ). You have to either flip the phone horizontally or use your fingers and shrink the screen down.

I guess this isn't anything to worry about. I would prefer it display the same as all the other pages do but I guess it all depends on the browser and settings the person has so I am not losing sleep over it. Only so much you can do I guess.

If anyone wants to play around and see if they can duplicate and/or somehow fix the issue here are the two code strings that cause it. Use them on a 480 mobile variant page. Display/placeholder box should be 415 W X 615 H.

<iframe src=http://www.seacoastlc.blogspot.com/ transparency=false width=100% height=100% scrolling=auto frameborder=0 marginheight=0 marginwidth=0></iframe>

<iframe src="https://calendar.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showCalendars =0&amp;mode=AGENDA&amp;height=615&amp;wkst=1&amp;b gcolor=%23FFFFFF&amp;src=mt5l3t2pd2lf2m1likbs9q5k0 0%40group.calendar.google.com&amp;color=%23182C57& amp;ctz=America%2FNew_York" style="border-width:0" width="415" height="615" frameborder="0" scrolling="no"></iframe>

One more thing to add to the puzzle( sorry for all the posts but figure I will add what info I can when I see something )...

I was just adding the menu items to the menu layer on the mobile variant version of the site and it dawned on me that the page images in the layer gallery for the 2 pages in question( calendar and blog )actually shows them about 1/3 again as big as the rest of them. Pretty much the size difference I see when viewing the actual pages on my cell. I checked and the pages are actually/physically 480 wide like all the rest but even in layer gallery they display wider?

Really strange.