locked
Why same page looks different - only address is different? RRS feed

  • Question

  • User186656733 posted

    I have a page on my site that can be accessed using one of two URLs. 

    In both cases it is exactly the same page, with the same everything, except that in one case the URL is different.

    The issue happens only when using Chrome or Firefox browsers on a phone.  So, when accessing the page from www.photographybyori.com/blog, all is OK, but when accessing the same page from Rigbee.me, looks different on phone.

    I am at a loss.  Help is most appreciated.

    Monday, October 23, 2017 4:52 AM

Answers

  • User347430248 posted

    Hi Saavik,

    I can see that you are using iframe tag to display your webpage.

    I try to find the issue and I find that mostly if the width of the iframe is not set as 100% then this kind of issue get occur.

    but here I can see that you already set the width as 100 %.

    but I can see that you did not use double quotation while passing it.

    so it is possible that it is not taking that argument.

    I suggest you to use double quotation while passing it.

    example:

    <iframe width="100%" height="100%" src="//www.abc.com" ></iframe>

    try to make a test and let us know whether it solves your issue or not.

    so that we can try to provide you further suggestions , if needed.

    Reference:

    Resizing an iframe on a responsive template

    Responsive IFrames — The Right Way!

    Regards

    Deepak
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 25, 2017 6:53 AM

All replies

  • User347430248 posted

    Hi Saavik,

    I try to check both of the urls and try to open it using firefox in mobile phone.

    it is possible that on other url it is not able to find and apply the css file. or it is not able to find that it is mobile device.

    so it looks big as it is displayed in pc.

    try to again copy all the files to http://rigbee.me/.

    so if any files is missing or corrupted then it get replaced by new file.

    then it should work as expected.

    Regards

    Deepak

    Monday, October 23, 2017 6:47 AM
  • User186656733 posted

    Thank you for your quick answer.

    When I said files are the same, I meant exactly the same, not even a copy.  Rigbee.me is redirected to PhotographyByOri.com.

    It occurred to me that the css is not found, but I can't figure out why.  The code checks for the browser, knows that the browser is Chrome mobile, and sets css to /chromemobile.css, which exists at the top level.

    How can I check what is the *current* directory?

    Monday, October 23, 2017 4:04 PM
  • User347430248 posted

    Hi Saavik,

    you had mentioned that,"Rigbee.me is redirected to PhotographyByOri.com"

    can you show us how you redirected to PhotographyByOri.com?

    it can help us to find the issue or can provide some details that might help to solve the issue.

    I check that with other browsers on the phone the same issue happens.

    so it is also possible that the issue related with your redirecting the site to another url.

    Regards

    Deepak

    Tuesday, October 24, 2017 1:26 AM
  • User186656733 posted

    Thank you for your reply.

    I looked at the html when I type "Rigbee.me" in the address bar in any browser.

    It seems that the domain company does not REALLY redirect the address.  They show the target address (i.e., my page) in an iframe, to which I do not have access. 

    Now the next question is:  If my page is being displayed in an iframe which is defined with width=100% and height=100%, why does my css not take effect?

    Help is most appreciated.

    Tuesday, October 24, 2017 2:55 AM
  • User347430248 posted

    Hi Saavik,

    I can see that you are using iframe tag to display your webpage.

    I try to find the issue and I find that mostly if the width of the iframe is not set as 100% then this kind of issue get occur.

    but here I can see that you already set the width as 100 %.

    but I can see that you did not use double quotation while passing it.

    so it is possible that it is not taking that argument.

    I suggest you to use double quotation while passing it.

    example:

    <iframe width="100%" height="100%" src="//www.abc.com" ></iframe>

    try to make a test and let us know whether it solves your issue or not.

    so that we can try to provide you further suggestions , if needed.

    Reference:

    Resizing an iframe on a responsive template

    Responsive IFrames — The Right Way!

    Regards

    Deepak
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 25, 2017 6:53 AM
  • User186656733 posted

    Thank you for your reply.

    I have no control over the iframe - not my code.  I will contact the company that is doing this and ask them.

    Thank you for this suggestion.

    Wednesday, October 25, 2017 3:51 PM
  • User347430248 posted

    Hi Saavik,

    I can see that some one else is having the code.

    so you can try to confirm with him and if possible then try to ask for the code they are using and try to post that code here.

    we will try to make a test with that code and try to check the issue.

    Regards

    Deepak

    Thursday, October 26, 2017 6:06 AM
  • User186656733 posted

    Here is the code I got from the other company.  My page is inside iframe.

    Help is most appreciated.

    <!DOCTYPE html>
    <html>
    <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <title></title>
    <meta name='description'>
    <meta name='keywords'>
    <style>
      html {
        overflow: auto;
      }
     
      html, body, iframe {
        margin: 0px;
        padding: 0px;
        height: 100%;
        border: none;
      }
     
      iframe {
        display: block;
        width: 100%;
        border: none;
        overflow: auto;
      }
    </style>
    </head>
    <body>
    <iframe src='http://www.photographybyori.com/RigbeeBlog.aspx'></iframe>
    </body>
    </html>

    Sunday, October 29, 2017 9:24 PM
  • User347430248 posted

    Hi Saavik,

    I try to make a test with the code given by you.

    I try to change many things. at the end I remove all the css then also it gave me the same effect.

    I try to test with both mobile and pc.

    I suggest you to also check the css at your end in the original page.

    it is also possible that it have some issue and it get reflect in iframe.

    Regards

    Deepak

    Monday, October 30, 2017 6:55 AM
  • User458742136 posted

    Hi Saavik,

    I have checked your page.

    On rigbee.me you have an iFrame to load the original page.

    However, the partent page on rigbee.me has set the meta-tag for content width:

    <meta content='width=device-width, initial-scale=1.0' name='viewport'>

    The value, device-width, indicates the width of the screen in CSS pixels at a scale of 100%.

    See more details here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

    I also did a test by removing that meta tab, I can see the pages are displayed as you expected:

    Regards,

    Ray

    Tuesday, October 31, 2017 7:24 AM
  • User186656733 posted

    Ray,

    Thank you for your response.

    Of course, you are correct.  Unfortunately, I have no control over the meta-tags.  When I request a domain "forward", the domain company puts my page inside an iframe, and I have no control of anything outside this iframe.

    Fortunately, I found ways to reformat the page and its graphics so now the page looks good (at least on the two mobile browsers I tried - Chrome and Firefox mobile).

    Thank you for your help.

    Wednesday, November 1, 2017 4:17 AM
  • User347430248 posted

    Hi  Saavik,

    I can see that you had found the root cause for the issue and the problem is solved.

    this thread is still open.

    I suggest you to mark appropriate suggestion as an answer, which helped you to solve the issue.

    it will help other community members in future who will face same kind of issue.

    it will help us to close this thread.

    if you do not mark the answer then this thread will remain open.

    Thanks for your understanding.

    Regards

    Deepak 

    Wednesday, November 1, 2017 5:20 AM